Type safety from backend to frontend is important to a lot of developers, but often case, one ends up in a situation were the backend and frontend are in separate languages, or on separate teams, or one does not simply control both sides of the application. To solve this, I often reach for OpenAPI SDK generators. Not only does the tool save a lot of time, I also find it to be an important tool to maintain some sense of stability in the age of agentic AI.
How It Works
When I mean OpenAPI SDK generators, I mean a tool that generates API call functions from an OpenAPI specification. There might be a few other ones out there, but the most recent “Hey API” has worked best for me. It’s actually quite incredible what the library is able to generate for you.
On a high level, the idea is quite simple. You make the backend generate an OpenAPI specification, and then have the HeyAPI tool generate fetch or axios function definitions based on that specification, that your frontend code then consumes. HeyAPI not only generates API-calling definitions, but also Typescript types to go along with it. I like this a lot because it adds a deterministic tool to the ever growing randomness of AI development. I also find this to be much better than just telling AI to “make it type safe” when working in a single language project like Next.js or what have you not.
The library can do a lot more, too. I have always been a fan of TanStack Query and I was overjoyed to find that it can also generate TanStack Query functions for you, right there, and for Vue as well!
https://heyapi.dev/docs/openapi/typescript/plugins/tanstack-query#_top
export default {
input: 'hey-api/backend', // sign up at app.heyapi.dev
output: 'src/client',
plugins: [
// ...other plugins
'@tanstack/vue-query',
],
};Just add a plugin, and you are rolling. Another thing I am still yet to explore is its integration with MSW. If you have a backend that is difficult to setup for per-branch deployments, or if you need special data sources and can be hard to set up for local development, or really for whatever reason, you can lean on having MSW provide you a mock API so you can focus on the frontend. The integration is still being worked on however, so I’ll check on it later.
Some issues
Now, this method has some kinks that need ironing. For one, you need to establish a pipeline for generating the SDK. If you have people working on the backend and frontend separately, this can be an issue if a good procedure is not established, as any changes made on the backend will require the frontend developer to regenerate the SDK. If you’re still one of the few that review code, the generated SDK can be tough to read as the generated functions have super long names and are very verbose.
Conclusion
All in all, this is my favorite way to “connect” API’s. With code becoming increasingly AI-generated, leaning on sensible, deterministic tools is crucial and this is one of those tools.