Het probleem dat tRPC oplost

Wanneer je een REST API bouwt in TypeScript, bepaalt de server de vorm van het antwoord. De client moet handmatig overeenkomende TypeScript-typen maken. Na verloop van tijd lopen deze typen uiteen doordat de API zich ontwikkelt, en de compiler kan het verschil niet detecteren omdat de typen in aparte pakketten zijn gedefinieerd.

Een hernoemd veld op de server wordt een stille fout tijdens het uitvoeren op de client.

GraphQL voorkomt verschuivende typen door TypeScript-typen uit het schema te genereren met hulpmiddelen zoals graphql-codegen. Dit werkt goed, maar voegt complexiteit toe: een aparte querytaal (GraphQL SDL), een stap voor codegeneratie in de bouwpijplijn en hulpmiddelen voor schemabeheer.

Voor teams die al in GraphQL hebben geïnvesteerd, is codegeneratie het juiste antwoord. Voor teams die typeveiligheid zonder de extra complexiteit van GraphQL willen, biedt tRPC een alternatief.

De aanpak van tRPC is radicaal eenvoudig: definieer je API-procedures op de server als TypeScript-functies, exporteer het routertype en importeer dat type aan de clientzijde. Geen codegeneratie. Geen aparte schemataal.

De TypeScript-compiler dwingt het contract tussen client en server tijdens het bouwen zelf af.

tRPC vereist dat de server en client typen delen via TypeScript-imports. Dit werkt van nature in een monorepo (Turborepo, Nx, pnpm workspaces), waarin de server en client aparte pakketten zijn die uit elkaar kunnen importeren.

Voor een volledig gescheiden back-end en front-end moet je de routertypen publiceren als een gedeeld pakket. Dat voegt een publicatiestap toe, maar er is nog steeds geen codegeneratie nodig.

Op de server definieer je een router en exporteer je het type ervan: export type AppRouter = typeof appRouter. Op de client importeer je dat type en maak je een getypeerde client: createTRPCReact(). De client weet precies welke procedures bestaan en wat hun invoer- en uitvoertypen zijn.

Als je een procedure op de server hernoemt, verschijnt er onmiddellijk een TypeScript-fout op de client.

Omdat tRPC rechtstreeks het typesysteem van TypeScript gebruikt, biedt je editor aan de clientzijde volledige automatische aanvulling voor procedurenamen, invoervormen en retourtypen. Een procedure hernoemen is een hernoemrefactor van TypeScript en geen handmatige zoek-en-vervangactie in de hele codebasis.

Deze verbetering van de ontwikkelaarservaring is in de praktijk de meest geprezen functie van tRPC.

Standaard gebruikt tRPC HTTP als transport. Elke procedureaanroep is een HTTP-verzoek. tRPC ondersteunt ook WebSockets voor abonnementen. Het transport is een implementatiedetail; de client-API is hetzelfde, ongeacht het transport.

Je kunt tRPC-procedures ook als conventionele REST-eindpunten beschikbaar maken met de REST-adapter, zodat clients die geen tRPC gebruiken ermee overweg kunnen.

tRPC werkt als middleware in Express, Fastify en Hono. Voor Next.js integreert het via API-routehandlers. De create-t3-app-starter (T3 Stack) bundelt tRPC, Prisma, NextAuth en Tailwind in een full-stack Next.js-sjabloon.

De T3 Stack is het populairste startpunt voor tRPC en laat patronen zien die klaar zijn voor productie.

Een andere typeveilige REST-aanpak is Zod-schema's definiëren, automatisch een OpenAPI-specificatie genereren en TypeScript-typen uit die specificatie genereren. Dit levert een API-contract op dat door clients die geen TypeScript gebruiken kan worden gebruikt.

tRPC is eenvoudiger, maar alleen voor TypeScript. OpenAPI+Zod voegt complexiteit toe, maar levert een openbaar API-contract op. Kies tRPC voor interne communicatie tussen TypeScript-delen; kies OpenAPI voor openbare API's.

tRPC is geen vervanging voor REST wanneer je een openbare API nodig hebt die door derden, mobiele clients die niet in TypeScript zijn geschreven of partners die een stabiel contract met versies nodig hebben, wordt gebruikt. Het is specifiek bedoeld voor TypeScript-monorepo's met typeveiligheid over de volledige stack.

Als je deze afbakening begrijpt, voorkom je dat je tRPC toepast in situaties waarin REST of GraphQL beter past.

Met npm create t3-app@latest maak je een Next.js-project aan met tRPC, Prisma, NextAuth.js, Tailwind CSS en TypeScript vooraf geconfigureerd. De gegenereerde code laat de routerstructuur, het aanmaken van de context en de clientconfiguratie zien.

Dit startproject bestuderen is de snelste manier om te begrijpen hoe alle onderdelen van tRPC in een echte toepassing samenwerken.

tRPC voorkomt dat typen tussen de TypeScript-client en -server uit elkaar lopen door het TypeScript-type van de router rechtstreeks via een import te delen, waardoor codegeneratie overbodig wordt. Het werkt in monorepo's en kan worden geïntegreerd met Next.js, Express, Fastify en Hono. De T3 Stack (create-t3-app) is het standaardstartproject voor productie.

tRPC werkt uitsluitend met TypeScript en is vooral geschikt voor interne full-stacktoepassingen, niet voor openbare API's.