trpc-type-safety

tRPC — End-to-End Type Safety

Build type-safe APIs where TypeScript types flow automatically from server to client with zero code generation. Define your API once, get automatic type inference everywhere.

When to Use

• Full-stack TypeScript applications (Next.js, T3 stack, monorepos).
• Projects where client and server share a TypeScript codebase.
• Internal APIs where you control both ends — no external consumers.
• Apps using React Query for data fetching and caching.
• Teams wanting REST-like simplicity with GraphQL-like type safety.

Avoid when: public APIs for non-TypeScript clients, polyglot microservices, mobile apps in Swift/Kotlin, or when you need OpenAPI documentation for external developers.

Quick Start

# Server
npm install @trpc/server zod

# React/Next.js client
npm install @trpc/client @trpc/react-query @tanstack/react-query

Server — Define Router

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

const t = initTRPC.create();

export const appRouter = t.router({
  hello: t.procedure
    .input(z.object({ name: z.string() }))
    .query(({ input }) => {
      return { greeting: `Hello ${input.name}` };
    }),

  createPost: t.procedure
    .input(z.object({ title: z.string(), content: z.string() }))
    .mutation(async ({ input }) => {
      return { id: 1, ...input };
    }),
});

export type AppRouter = typeof appRouter;

Client — React Usage

// client/trpc.ts
import { createTRPCReact } from '@trpc/react-query';
import type { AppRouter } from '../server/trpc';

export const trpc = createTRPCReact<AppRouter>();

// Component — fully typed, zero codegen
function MyComponent() {
  const { data } = trpc.hello.useQuery({ name: 'World' });
  const createPost = trpc.createPost.useMutation();

  return <div>{data?.greeting}</div>;
}

Router Definition

Nested Routers (Namespacing)

const userRouter = t.router({
  getById: t.procedure
    .input(z.string())
    .query(({ input }) => getUser(input)),

  create: t.procedure
    .input(z.object({ name: z.string(), email: z.string() }))
    .mutation(({ input }) => createUser(input)),
});

const postRouter = t.router({
  list: t.procedure.query(() => getPosts()),
  create: t.procedure
    .input(z.object({ title: z.string() }))
    .mutation(({ input }) => createPost(input)),
});

export const appRouter = t.router({
  user: userRouter,
  post: postRouter,
});

// Client: trpc.user.getById.useQuery('123')
// Client: trpc.post.list.useQuery()