"tRPC 全栈类型安全实践"

tRPC 全栈类型安全实践概述tRPC 通过 TypeScript 类型推断在服务端与客户端之间共享契约，无需生成代码或写额外的 API 层。本文基于 v10 稳定 API 展示定义、调用与 SSR 集成。服务端路由定义// server/trpc.ts import { initTRPC } from '@trpc/server' const t = initTRPC.create() export const appRouter = t.router({ hello: t.procedure.query(() => ({ message: 'Hello tRPC' })), add: t.procedure.input(z.object({ a: z.number(), b: z.number() })).mutation(({ input }) => ({ sum: input.a + input.b })), }) export type AppRouter = typeof appRouter Next.js 客户端集成// utils/trpc.ts import { createTRPCReact } from '@trpc/react-query' import type { AppRouter } from '../server/trpc' export const trpc = createTRPCReact<AppRouter>() // app/page.tsx（客户端组件片段） import { trpc } from './utils/trpc' export default function Page() { const hello = trpc.hello.useQuery() const add = trpc.add.useMutation() return ( <div> <p>{hello.data?.message}</p> <button onClick={() => add.mutate({ a: 1, b: 2 })}>Add</button> </div> ) } 服务器端直接调用（SSR）// server/caller.ts import { appRouter } from './trpc' export const caller = appRouter.createCaller({ /* 上下文 */ }) const data = await caller.hello() 验证要点API 与用法基于 v10 稳定版本；类型推断贯穿服务端/客户端调用。在 SSR/客户端均可一致运行，避免额外的代码生成步骤与维护成本。