trpc-router

Original：🇺🇸 English

Translated

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.

1installs

Sourcetrpc/trpc

Added on2026-07-27

NPX Install

npx skill4agent add trpc/trpc trpc-router

SKILL.md Content

View Translation Comparison →

tRPC -- Skill Router

Decision Tree

What are you trying to do?

Define a tRPC backend (server)

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

Host the tRPC API (adapters)

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

Consume the tRPC API (client)

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

Use tRPC with a framework

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

Advanced patterns

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

Quick Reference: Minimal Working App

ts

// server/trpc.ts
import { initTRPC } from '@trpc/server';

const t = initTRPC.create();

export const router = t.router;
export const publicProcedure = t.procedure;

ts

// 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;

ts

// server/index.ts
import { createHTTPServer } from '@trpc/server/adapters/standalone';
import { appRouter } from './appRouter';

const server = createHTTPServer({ router: appRouter });
server.listen(3000);

ts

// 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' });