DEV Community

Alex Spinov
Alex Spinov

Posted on

tRPC Has a Free Type-Safe API Layer — Never Write REST Endpoints Again

REST APIs Have a Type Gap

You change an API response field from userName to name. The backend compiles fine. The frontend compiles fine. Everything breaks at runtime because they disagree on the shape of data.

OpenAPI, GraphQL codegen, manual types — all try to solve this. They all add complexity.

tRPC: End-to-End Type Safety Without Code Generation

tRPC connects your TypeScript backend and frontend with zero code generation. Change a return type on the server, your frontend gets a type error instantly.

How It Works

Backend: Define procedures

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(async ({ input }) => {
      const user = await db.users.findUnique({ where: { id: input.id } })
      return user // TypeScript knows the return type
    }),

  createUser: t.procedure
    .input(z.object({ name: z.string(), email: z.string().email() }))
    .mutation(async ({ input }) => {
      return db.users.create({ data: input })
    })
})

export type AppRouter = typeof appRouter
Enter fullscreen mode Exit fullscreen mode

Frontend: Call them like functions

import { trpc } from './utils/trpc'

// Full autocomplete. Full type checking.
const user = trpc.getUser.useQuery({ id: '123' })
// user.data is fully typed — same type as the backend returns

const mutation = trpc.createUser.useMutation()
mutation.mutate({ name: 'Alice', email: 'alice@example.com' })
// TypeScript will error if you pass wrong fields
Enter fullscreen mode Exit fullscreen mode

No REST. No GraphQL. No OpenAPI.

  • No URL string construction (/api/users/${id})
  • No fetch wrapper boilerplate
  • No GraphQL schema + resolvers + codegen
  • No OpenAPI spec maintenance

Just TypeScript. The compiler is your API contract.

When tRPC Shines

  • Full-stack TypeScript apps (Next.js, Remix, SvelteKit with TS)
  • Monorepos where backend and frontend share code
  • Rapid prototyping where API shape changes constantly
  • Small teams that want to move fast without API documentation overhead

When to Use REST/GraphQL Instead

  • Public APIs consumed by third parties (they need OpenAPI/GraphQL)
  • Multi-language backends (tRPC requires TypeScript)
  • Very large teams where explicit API contracts help coordination

The Stack

  • tRPC + Next.js: The most popular combo
  • tRPC + Zod: Input validation with type inference
  • tRPC + React Query: Built-in caching and optimistic updates
  • tRPC + Drizzle: Database to frontend, fully typed

Get Started

npm install @trpc/server @trpc/client @trpc/react-query
Enter fullscreen mode Exit fullscreen mode

Building apps that need external data? Check out 88+ web scrapers on Apify — Reddit, Trustpilot, Google News, HN. Custom solutions: spinov001@gmail.com

Top comments (0)