trpc-router

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

tRPC -- Skill Router

tRPC -- 技能路由

Decision Tree

决策树

What are you trying to do?

你想要实现什么功能？

Define a tRPC backend (server)

定义tRPC后端（服务器）

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

初始化tRPC，定义路由、过程、上下文，导出AppRouter -> 加载技能：
```
server-setup
```
添加中间件(.use)、认证守卫、日志记录、基础过程 -> 加载技能：
```
middlewares
```
使用Zod或其他库添加输入/输出验证 -> 加载技能：
```
validators
```
抛出类型化错误、为客户端格式化错误、全局错误处理 -> 加载技能：
```
error-handling
```
从服务器代码调用过程、编写集成测试 -> 加载技能：
```
server-side-calls
```
在查询响应上设置Cache-Control头（CDN、浏览器缓存） -> 加载技能：
```
caching
```
在变更中接收FormData、File、Blob或二进制上传 -> 加载技能：
```
non-json-content-types
```
设置实时订阅（SSE或WebSocket） -> 加载技能：
```
subscriptions
```

Host the tRPC API (adapters)

托管tRPC API（适配器）

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

Node.js内置HTTP服务器（最简单，本地开发） -> 加载技能：
```
adapter-standalone
```
Express中间件 -> 加载技能：
```
adapter-express
```
Fastify插件 -> 加载技能：
```
adapter-fastify
```
AWS Lambda（API Gateway v1/v2、Function URLs） -> 加载技能：
```
adapter-aws-lambda
```
Fetch API / Edge（Cloudflare Workers、Deno、Vercel Edge、Astro、Remix） -> 加载技能：
```
adapter-fetch
```

Consume the tRPC API (client)

消费tRPC API（客户端）

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

创建纯TypeScript客户端，配置链接、请求头、类型 -> 加载技能：
```
client-setup
```
配置链接链（批量处理、流式传输、拆分、WebSocket、SSE） -> 加载技能：
```
links
```
使用SuperJSON转换器处理Date、Map、Set、BigInt -> 加载技能：
```
superjson
```

Use tRPC with a framework

在框架中使用tRPC

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

React结合TanStack Query（useQuery、useMutation、queryOptions） -> 加载技能：
```
react-query-setup
```
Next.js App Router（RSC、服务器组件、HydrateClient） -> 加载技能：
```
nextjs-app-router
```
Next.js Pages Router（withTRPC、SSR、SSG助手） -> 加载技能：
```
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
```

从tRPC路由生成OpenAPI规范、REST客户端 -> 加载技能：
```
openapi
```
多服务网关、自定义路由链接、SOA -> 加载技能：
```
service-oriented-architecture
```
认证中间件 + 客户端请求头 + 订阅认证 -> 加载技能：
```
auth
```

Quick Reference: Minimal Working App

快速参考：最小可运行应用

// 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/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 details
```
client-setup
```
-- full client configuration
```
adapter-standalone
```
-- simplest adapter for getting started
```
react-query-setup
```
-- React integration
```
nextjs-app-router
```
-- Next.js App Router integration

```
server-setup
```
-- 完整的服务器初始化细节
```
client-setup
```
-- 完整的客户端配置
```
adapter-standalone
```
-- 最简单的入门适配器
```
react-query-setup
```
-- React集成
```
nextjs-app-router
```
-- Next.js App Router集成

trpc-router

Original

Translation

tRPC -- Skill Router

tRPC -- 技能路由

Decision Tree

决策树

What are you trying to do?

你想要实现什么功能？

Define a tRPC backend (server)

定义tRPC后端（服务器）

Host the tRPC API (adapters)

托管tRPC API（适配器）

Consume the tRPC API (client)

消费tRPC API（客户端）

Use tRPC with a framework

在框架中使用tRPC

Advanced patterns

高级模式

Quick Reference: Minimal Working App

快速参考：最小可运行应用

See Also

另请参阅