Build Type-Safe Full-Stack APIs with tRPC

tRPC Full-Stack builds end-to-end type-safe APIs where server router types flow straight to the client, with no schema or code-generation step: every call is autocompleted, validated at compile time, and refactoring-safe. It sets up initTRPC.context<Context>().create() with a Zod-aware error formatter, then defines two separate context factories - createTRPCContext for the HTTP handler (App Router receives a fetch Request, not a Node NextApiRequest) and createServerContext for direct server-side callers like Server Components or cron jobs - because the two surfaces cannot share one factory. An auth middleware (enforceAuth) throws TRPCError({ code: 'UNAUTHORIZED' }) when there is no session, extends the context for everything downstream rather than re-querying the database in each procedure, and narrows the context type, producing a protectedProcedure alongside the public one. Domain routers (posts, users, billing) are built with query/mutation/subscription procedures, every input validated with a Zod schema, then merged into one root router whose AppRouter type - never the router value itself - is exported for the client. For calls that do not need an HTTP round trip at all, createCallerFactory(appRouter) paired with createServerContext() lets a Server Component or other direct server-side caller invoke a procedure straight from the router, without a synthetic request object.

Use it for a TypeScript full-stack app (Next.js, Remix, Express+React) where client and server share one repo, for end-to-end type safety without REST/GraphQL schema overhead, for adding real-time subscriptions to an existing tRPC setup, for multi-step middleware like auth/rate-limiting/tenant scoping, or for incrementally migrating an existing REST/GraphQL API. Business logic belongs in the procedure or a service layer, never in the route handler, and the tRPC client instance should be created per-provider rather than shared globally to avoid stale closures.

Input is typed, Zod-validated procedure input from the client, including pagination cursors and IDs, so malformed input cannot reach the handler unvalidated. Output is a typed result flowing back through React Query's cache; mutations call utils.<router>.<procedure>.invalidate() on success to refetch stale data rather than leaving the UI out of sync. Errors should be raised as TRPCError with a public-safe message rather than leaking internal error details to the client - stack traces stay server-side only. On the client, import the router's type with import type { AppRouter }, not a value import, or TypeScript reports "AppRouter is not assignable to AnyRouter". Mounting the handler also depends on which router is in play: an App Router route handler needs @trpc/server/adapters/fetch and fetchRequestHandler, since the adapters/next package is for the Pages Router only and fails with "Cannot find module" under App Router. Subscriptions need a splitLink routing subscriptions to wsLink and queries/mutations to httpBatchLink, or the WebSocket connection never establishes and the client silently falls back to nothing.

@trpc/server, @trpc/client, @trpc/react-query, @tanstack/react-query, and zod, installed together via npm; Next-Auth (or an equivalent) for the auth() call inside both context factories. It pairs with @typescript-expert for generic router patterns, @react-patterns for hook usage, @test-driven-development for procedure unit tests via createCallerFactory, and @security-auditor for reviewing middleware auth and validation gaps.

Full-stack TypeScript teams on a single-repo Next.js, Remix, or Express+React app who want compile-time-checked, autocompleted API calls end to end, without maintaining a separate REST or GraphQL schema layer or a code-generation step to keep client and server types in sync.