mcpField
T
trpc

trpc

github.com/pproenca开发22266 次安装12 周前更新
代码仓库

关于 trpc

面向编写或审查 tRPC v11 代码的 Agent 技能,整理 React 集成、迁移、路由、传输、SSR 和订阅中的版本特定决策与陷阱。

主要功能

  1. 01tRPC v11 API 指引
  2. 02v10 到 v11 迁移说明
  3. 03路由器与过程构建模式
  4. 04错误与验证指导
  5. 05传输与批处理注意事项
  6. 06SSR 与订阅模式

适用场景

  1. 01审查 tRPC v11 代码
  2. 02将项目从 tRPC v10 迁移
  3. 03添加文件上传或订阅
  4. 04排查预取与批处理问题

安装

复制下面的命令,在终端中运行。

$npx skills add https://github.com/pproenca/dot-skills --skill trpc

安装后在 Claude Code 中输入/trpc确认已加载。

包含的文件

除 SKILL.md 外,安装时一起下载的参考资料和脚本。

AGENTS.md
metadata.json
assets/templates/
_template.md
references/
_sections.md
client-derive-query-keys.md
client-invalidate-with-query-filters.md
client-subscription-options.md
client-tanstack-integration.md
err-format-standard-schema-issues.md
err-nullish-cursor.md
err-output-strips-fields.md
err-set-isdev-explicitly.md
link-cap-batch-size.md
link-default-to-httpbatchlink.md
link-endpoint-matches-mount-path.md
link-gate-cache-headers.md
link-read-batch-headers-from-oplist.md
link-route-subscriptions-separately.md
link-scope-body-parsers.md
link-transformer-on-terminating-links.md
mig-await-get-raw-input.md
mig-formdata-is-native.md
mig-renamed-type-exports.md
mig-typescript-version-floor.md
proc-concat-over-standalone-middleware.md
proc-input-before-use.md
proc-merge-only-object-inputs.md
proc-narrow-ctx-in-middleware.md
proc-single-trpc-instance.md
rsc-dehydrate-pending-queries.md

详细介绍

tRPC v11

tRPC 强制要求做出的决策,以及如何解决这些问题。本文旨在让 Agent 在编写或审查代码时应用这些规则。每条规则都会指出它要纠正的错误默认做法;对于模型已经能正确处理的情况,不设规则。

本文固定针对 tRPC v11,并已根据 11.18.0(2026-06-17)验证。 不存在 v12——但此处有几个 API 带有 @deprecated … will be removed in v12 标记,目前仍在发布。依赖版本:typescript >=5.7.2、@tanstack/react-query ^5.80.3、react >=18.2.0。

何时应用

在以下情况下使用此技能:

  • 代码导入了 initTRPC、createTRPCContext、createTRPCOptionsProxy、createTRPCReact、createTRPCClient、httpBatchLink、httpSubscriptionLink、splitLink、fetchRequestHandler、createCallerFactory 或 TRPCError——或使用 .input() / .output() / .use() / .query() / .mutation() / .subscription() 定义过程
  • 用户提到“所有类型都变成了 any”、“失效处理不起作用”、“contextMap[utilName] is not a function”、“transformer 属性换了位置”、“仪表板上出现 414 / 413”、“订阅无法连接”、“预取没有完成水合”,或“每个过程都返回 404”
  • 将代码库从 tRPC v10 迁移过来,或审查基于 v10 时代示例编写的 tRPC 代码——这是收益最高的时机,因为推荐的 React 客户端已变更,而陈旧代码往往仍能编译通过
  • 为现有路由器添加第一个订阅、第一个文件上传或第一个 RSC 预取——每种情况都会涉及一个 v11 已彻底取代 v10 做法的领域
  • 随着应用规模扩大而审查批处理客户端,因为未设上限的默认值会导致间歇性生产故障

此技能不适用于:

  • TanStack Query 的一般语义——缓存生命周期、重试、useMutation 的使用体验(→ tanstack-query)
  • 编写或迁移用作验证器的 Zod 模式(→ zod)
  • 超出 tRPC 处理器范围的 Next.js App Router 路由、流式传输或缓存(→ nextjs)
  • TypeScript 的一般类型收窄和泛型(→ typescript)

规则分类

#分类前缀涵盖内容
1React 客户端接口client-集成方式、选项工厂、查询键、失效处理、订阅
2v10 → v11 差异mig-重命名、移除和惰性实例化的 API;依赖版本下限
3路由器与过程构建proc-实例标识、构建器顺序、上下文收窄、输入合并
4错误与验证语义err-哪些内容会暴露、哪些内容会泄露、使用哪种错误类
5链接、传输与序列化link-链接链、批处理限制、转换器、适配器、缓存
6SSR、RSC 与服务端调用rsc-预取与水合、QueryClient 生命周期、调用方误用
7订阅与流式传输sub-基于 SSE 的异步生成器、身份验证、保活、积压竞态

快速参考

1. React 客户端接口
  • client-tanstack-integration — 使用 @trpc/tanstack-react-query 构建 React 数据获取;如今 createTRPCReact 是经典用法
  • client-invalidate-with-query-filters — 新代理上没有 useUtils();通过 queryClient + pathFilter() / queryFilter() 进行失效处理
  • client-derive-query-keys — 新代理上没有 getQueryKey();键可通过代理上的 queryKey() / pathKey() / infiniteQueryKey() 获取
  • client-subscription-options — 新代理上没有 .useSubscription();将 subscriptionOptions() 传给 @trpc/tanstack-react-query 中的 useSubscription
2. v10 → v11 的差异
3. Router 与 Procedure 构建
4. 错误与验证语义
  • err-format-standard-schema-issues — 解析器按顺序分派,因此仅支持 Zod 的 errorFormatter 会对 Valibot / Effect(StandardSchemaV1Error)以及 ArkType(ArkErrors)返回 null
  • err-output-strips-fields — .output() 返回解析后的值,因此会剥离未知键;其失败会返回 500,而不是 4xx
  • err-nullish-cursor — .optional() 游标只会在失效后返回 400;请使用 .nullish()
  • err-set-isdev-explicitly — 如果未显式设置 isDev,边缘运行时会将 error.data.stack 发送给每个客户端
5. 链路、传输与序列化
6. SSR、RSC 与服务端调用
7. 订阅与流式传输

使用方法

遇到相关决策时,阅读对应的参考文件。每条规则都会指出它要纠正的错误默认做法,然后展示规范方式;只有当错误做法确实容易踩坑时,才会对比错误与正确的做法。

建议先了解以下两条捷径:

  • 正在审查或迁移现有的 tRPC 代码? 从 client- 和 mig- 开始。过时的代码往往仍能编译,因此不会有任何提示引导你查看这些内容;但其他所有内容都以它们为基础。

  • 正在强化已能正常运行的功能? 与安全相关的规则包括 link-gate-cache-headers、rsc-query-client-per-request、err-set-isdev-explicitly、proc-input-before-use 和 sub-keep-credentials-out-of-urls。

  • 章节定义 — 分类结构与排序依据

  • 规则模板 — 用于添加新规则

  • AGENTS.md — 自动生成的所有规则目录

相关技能

  • tanstack-query — tRPC 的 React 客户端现在委托给它处理的查询层;它拥有本技能所依赖的缓存语义
  • zod — 验证器编写与 Zod 4 差异,包括本技能仅作提示的 .flatten() → z.treeifyError() 变更
  • typescript — 超出 tRPC 推断范围的一般类型级工作

评论

支持 Markdown