tRPC — End-to-End Typesafe APIs for TypeScript

What it is

tRPC lets you build fully typesafe APIs in TypeScript without writing schemas, running code generators, or adding runtime validation overhead. When you define a procedure on the server, the client automatically knows the input types, output types, and available endpoints. Change a return type on the server and your frontend shows a compile error immediately.

tRPC targets TypeScript teams building full-stack applications where the API layer between frontend and backend is a source of type mismatches. It works with Next.js, React, Vue, and any TypeScript frontend framework.

How it saves time or tokens

tRPC eliminates the schema definition and code generation step that tools like GraphQL or OpenAPI require. There is no .graphql file to maintain, no openapi.yaml to keep in sync, and no codegen CLI to run after changes. TypeScript's type inference handles everything at compile time. For development velocity, this means changing an API response shape and seeing the impact across your entire codebase instantly.

How to use

1. Install tRPC packages:

npm install @trpc/server @trpc/client @trpc/react-query @tanstack/react-query zod

1. Define a router on the server:

import { initTRPC } from '@trpc/server';
import { z } from 'zod';

const t = initTRPC.create();

export const appRouter = t.router({
  getUser: t.procedure
    .input(z.object({ id: z.string() }))
    .query(({ input }) => {
      return { id: input.id, name: 'Alice', role: 'admin' };
    }),
});

export type AppRouter = typeof appRouter;

1. Call from the client with full type safety -- the client knows getUser returns { id, name, role }.

Example

Full client-server type inference:

// Client-side: types are inferred from the server router
import { trpc } from './utils/trpc';

function UserProfile() {
  const { data } = trpc.getUser.useQuery({ id: '123' });
  // data is typed as { id: string; name: string; role: string }
  return <h1>{data?.name}</h1>;
}

Rename name to displayName on the server, and the client shows a TypeScript error immediately.

Related on TokRepo

• AI Tools for API — API frameworks and tools for building web services
• AI Tools for Coding — Development tools for TypeScript and full-stack projects

Common pitfalls

• tRPC requires both frontend and backend to be TypeScript. If your backend is Python, Go, or another language, tRPC does not apply.
• tRPC uses HTTP POST for all procedures by default. This can cause issues with CDN caching that expects GET requests. Use the httpBatchLink configuration for batching.
• Large routers with hundreds of procedures can slow down TypeScript type checking. Split routers into smaller sub-routers and merge them.