If you've ever had your frontend crash because the backend API changed a field name without you knowing, you need tRPC. It's not just a library; it's a contract between your client and server that is enforced by the compiler.
How it Works
tRPC allows you to export the type of your router, not the router itself. Your frontend imports this type and suddenly, your IDE knows exactly what endpoints exist, what inputs they expect, and what they return.
// Backend
export const appRouter = t.router({
hello: t.procedure.input(z.string()).query(({ input }) => {
return Hello ${input};
}),
});
// Frontend
trpc.hello.useQuery('World'); // Type-safe!
The Developer Experience
The autocomplete is magical. You type trpc. and see your entire API surface. Refactoring becomes a breeze—rename a procedure in the backend, and TypeScript immediately highlights every usage in the frontend that needs updating.
Performance
tRPC is lightweight and built on standard HTTP. With our setup using React Query (TanStack Query), you get caching, optimistic updates, and invalidation strategies out of the box.