Type-safe frontend SDK from API contracts

TL;DR

• The frontend had too many places where API behaviour had to be remembered by hand.
• I needed to make the API contract visible to product code before runtime.
• I connected route definitions to generated clients, query hooks, and a session-aware fetch layer.
• The result was a smaller integration surface and earlier feedback when backend contracts changed.

The frontend should not have to guess what the API accepts or returns. When those guesses spread across forms, query hooks, and client utilities, every change becomes a search problem.

Where it started

API knowledge was scattered across form code, query code, and local fetch helpers. Each screen could remember headers, response shapes, or error metadata a little differently.

What needed to change

The goal was to make the API contract visible to the frontend at build time. Route definitions became the source for generated types, client methods, and React Query hooks.

That meant a changed response shape could fail close to the code that used it instead of becoming a runtime surprise.

What I built

The fetch layer sits underneath the generated client. It owns session handling, CSRF headers, API version headers, and response metadata so individual screens do not need to repeat that work.

Generated hooks then give product code a smaller surface: call the operation, pass typed input, and handle typed output.

What changed

This turns integration into a contract instead of a convention. It also makes the frontend less dependent on tribal knowledge about which headers, transforms, or authentication details are required.

What I would watch

Generated code adds a pipeline to maintain. The contract has to stay clear, and the generated surface needs review so it does not expose internal routes by accident.