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
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
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
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)