How I Fixed Frontend-Backend Desync with Hey API and FastAPI

A while ago, I wrote a post about how I use Zod to validate requests from my backend API so that I can catch errors related to changes in my backend API early. For example, if I change the shape of a response in my backend, Zod will fail to validate the response if my front-end hasn’t been updated to deal with this new shape. Then, I can go and fix it. This is better than allowing the app to crash during runtime.

However, I no longer use this solution since I switched to Hey API. This tool is an SDK generator that will automatically generate API functions, type definitions, and Tanstack Query hooks that you can simply import when you need to make requests to your backend.

Basically, I will have my FastAPI dev server running, and I have a config file (openapi-ts.config.ts) that looks like this:

import { defineConfig } from "@hey-api/openapi-ts";

export default defineConfig({
  input: "http://localhost:8000/openapi.json",
  output: "src/api",
  plugins: ["@hey-api/client-fetch", "@tanstack/react-query"],
});

Then I have this simple npm script: "api:sync": "openapi-ts" that will automatically sync with my running FastAPI server. Once this script runs, the src/api directory will contain a bunch of files that essentially make up your SDK.

This was a total game changer for me, and makes API integration much easier because I no longer need to write type definitions or Tanstack Query hooks when I need to communicate with my backend.