Menu
Entry point for all tRPC skills. Decision tree routing by task: initTRPC.create(), t.router(), t.procedure, createTRPCClient, adapters, subscriptions, React Query, Next.js, links, middleware, validators, error handling, caching, FormData.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Create a vanilla tRPC client with createTRPCClient<AppRouter>(), configure link chain with httpBatchLink/httpLink, dynamic headers for auth, transformer on links (not client constructor). Infer types with inferRouterInputs and inferRouterOutputs. AbortController signal support. TRPCClientError typing.
Configure the tRPC client link chain: httpLink, httpBatchLink, httpBatchStreamLink, splitLink, loggerLink, wsLink, createWSClient, httpSubscriptionLink, unstable_localLink, retryLink. Choose the right terminating link. Route subscriptions via splitLink. Build custom links for SOA routing. Link options: url, headers, transformer, maxURLLength, maxItems, connectionParams, EventSource ponyfill.
Configure SuperJSON transformer on both server initTRPC.create({ transformer: superjson }) and every client terminating link (httpBatchLink, httpLink, wsLink, httpSubscriptionLink) to support Date, Map, Set, BigInt over the wire. Transformer must match on both sides. In v11, transformer goes on individual links, not the client constructor.
Full end-to-end tRPC setup for Next.js App Router. Covers route handler with fetchRequestHandler (GET + POST exports), TRPCProvider with QueryClientProvider, createTRPCOptionsProxy for RSC prefetching, HydrateClient/HydrationBoundary for hydration, useSuspenseQuery for Suspense, and server-side callers.
Set up tRPC in Next.js Pages Router with createNextApiHandler, createTRPCNext, withTRPC HOC, SSR via ssr option and ssrPrepass, SSG via createServerSideHelpers with getStaticProps, and server-side helpers for getServerSideProps prefetching.
Generate OpenAPI 3.1 spec from a tRPC router with @trpc/openapi CLI or programmatic API. Generate typed REST client with @hey-api/openapi-ts and configureTRPCHeyApiClient(). Configure transformers (superjson, EJSON) for generated clients. Alpha status.
| name | trpc-router |
| description | Entry point for all tRPC skills. Decision tree routing by task: initTRPC.create(), t.router(), t.procedure, createTRPCClient, adapters, subscriptions, React Query, Next.js, links, middleware, validators, error handling, caching, FormData. |
| type | core |
| library | trpc |
| library_version | 11.16.0 |
| requires | [] |
| sources | ["trpc/trpc:www/docs/main/introduction.mdx","trpc/trpc:www/docs/main/quickstart.mdx"] |
Initialize tRPC, define routers, procedures, context, export AppRouter
-> Load skill: server-setup
Add middleware (.use), auth guards, logging, base procedures
-> Load skill: middlewares
Add input/output validation with Zod or other libraries
-> Load skill: validators
Throw typed errors, format errors for clients, global error handling
-> Load skill: error-handling
Call procedures from server code, write integration tests
-> Load skill: server-side-calls
Set Cache-Control headers on query responses (CDN, browser caching)
-> Load skill: caching
Accept FormData, File, Blob, or binary uploads in mutations
-> Load skill: non-json-content-types
Set up real-time subscriptions (SSE or WebSocket)
-> Load skill: subscriptions
Node.js built-in HTTP server (simplest, local dev)
-> Load skill: adapter-standalone
Express middleware
-> Load skill: adapter-express
Fastify plugin
-> Load skill: adapter-fastify
AWS Lambda (API Gateway v1/v2, Function URLs)
-> Load skill: adapter-aws-lambda
Fetch API / Edge (Cloudflare Workers, Deno, Vercel Edge, Astro, Remix)
-> Load skill: adapter-fetch
Create a vanilla TypeScript client, configure links, headers, types
-> Load skill: client-setup
Configure link chain (batching, streaming, splitting, WebSocket, SSE)
-> Load skill: links
Use SuperJSON transformer for Date, Map, Set, BigInt
-> Load skill: superjson
React with TanStack Query (useQuery, useMutation, queryOptions)
-> Load skill: react-query-setup
Next.js App Router (RSC, server components, HydrateClient)
-> Load skill: nextjs-app-router
Next.js Pages Router (withTRPC, SSR, SSG helpers)
-> Load skill: nextjs-pages-router
Generate OpenAPI spec, REST client from tRPC router
-> Load skill: openapi
Multi-service gateway, custom routing links, SOA
-> Load skill: service-oriented-architecture
Auth middleware + client headers + subscription auth
-> Load skill: auth
// server/trpc.ts
import { initTRPC } from '@trpc/server';
const t = initTRPC.create();
export const router = t.router;
export const publicProcedure = t.procedure;
// server/appRouter.ts
import { z } from 'zod';
import { publicProcedure, router } from './trpc';
export const appRouter = router({
hello: publicProcedure
.input(z.object({ name: z.string() }))
.query(({ input }) => ({ greeting: `Hello ${input.name}` })),
});
export type AppRouter = typeof appRouter;
// server/index.ts
import { createHTTPServer } from '@trpc/server/adapters/standalone';
import { appRouter } from './appRouter';
const server = createHTTPServer({ router: appRouter });
server.listen(3000);
// client/index.ts
import { createTRPCClient, httpBatchLink } from '@trpc/client';
import type { AppRouter } from '../server/appRouter';
const trpc = createTRPCClient<AppRouter>({
links: [httpBatchLink({ url: 'http://localhost:3000' })],
});
const result = await trpc.hello.query({ name: 'World' });
server-setup -- full server initialization detailsclient-setup -- full client configurationadapter-standalone -- simplest adapter for getting startedreact-query-setup -- React integrationnextjs-app-router -- Next.js App Router integration