tRPC类型安全API构建技能Skill trpc

---

name: trpc description: tRPC端到端类型安全、过程、路由器、中间件和React集成。 allowed-tools: 读取, 写入, 编辑, Bash, Glob, Grep

tRPC 技能

为使用tRPC构建类型安全API提供专家协助。

能力

• 创建类型安全的过程和路由器
• 为身份验证/验证实现中间件
• 使用Next.js/React设置tRPC
• 处理订阅
• 配置错误处理
• 构建类型安全的客户端钩子

用法

在以下情况时调用此技能：

• 构建端到端类型安全的API
• 与React/Next.js集成
• 用类型安全的RPC替代REST
• 实现实时功能

模式

路由器定义

// server/trpc/routers/user.ts
import { z } from 'zod';
import { router, publicProcedure, protectedProcedure } from '../trpc';
import { TRPCError } from '@trpc/server';

export const userRouter = router({
  list: protectedProcedure
    .input(z.object({
      page: z.number().min(1).default(1),
      limit: z.number().min(1).max(100).default(10),
      search: z.string().optional(),
    }))
    .query(async ({ ctx, input }) => {
      const users = await ctx.prisma.user.findMany({
        where: input.search
          ? { name: { contains: input.search } }
          : undefined,
        skip: (input.page - 1) * input.limit,
        take: input.limit,
      });
      return users;
    }),

  byId: protectedProcedure
    .input(z.string())
    .query(async ({ ctx, input }) => {
      const user = await ctx.prisma.user.findUnique({
        where: { id: input },
      });
      if (!user) {
        throw new TRPCError({ code: 'NOT_FOUND' });
      }
      return user;
    }),

  create: protectedProcedure
    .input(z.object({
      name: z.string().min(1),
      email: z.string().email(),
    }))
    .mutation(async ({ ctx, input }) => {
      return ctx.prisma.user.create({ data: input });
    }),
});

React集成

// 在组件中
const { data, isLoading } = trpc.user.list.useQuery({ page: 1 });
const createUser = trpc.user.create.useMutation();

<button onClick={() => createUser.mutate({ name, email })}>
  创建
</button>

最佳实践

• 使用Zod进行输入验证
• 实现适当的中间件
• 利用类型推断
• 一致地处理错误

目标流程

• t3-栈开发
• nextjs-全栈
• 类型安全-api