mcpField
T
trpc-tanstack-nextjs

trpc-tanstack-nextjs

github.com/diegojohnsonl开发1128 次安装41 周前更新
代码仓库

关于 trpc-tanstack-nextjs

trpc-tanstack-nextjs 是构建端到端类型安全 API 的参考技能，结合 tRPC v11、TanStack Query 与 Next.js App Router。它通过专题指南和示例涵盖基础配置、客户端与服务端用法及可选集成。

主要功能

  1. 01提供 tRPC 完整配置指南
  2. 02讲解路由器、过程和中间件
  3. 03说明客户端查询与变更
  4. 04涵盖服务端预取与水合
  5. 05包含可选认证和实时模式

适用场景

  1. 01在 Next.js 应用中配置类型安全 API
  2. 02在客户端组件中使用查询与变更
  3. 03在服务端组件中预取并水合数据

安装

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

$npx skills add https://github.com/diegojohnsonl/trpc-tanstack-nextjs --skill trpc-tanstack-nextjs

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

包含的文件

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

references/
better-auth-integration.md
client-usage.md
infinite-queries.md
optimistic-updates.md
routers.md
server-usage.md
setup.md
subscriptions.md

详细介绍

tRPC + TanStack Query + Next.js App Router

使用 tRPC v11 和 @trpc/tanstack-react-query 适配器，为 Next.js 构建端到端类型安全的 API。

核心设置

  • setup - 从零开始完成完整设置，包含所有模块
  • routers - 创建路由器、过程和中间件
  • client-usage - 在客户端组件中使用查询、变更和 useUtils
  • server-usage - 在服务端组件中进行预取、水合和调用 getCaller

可选集成

  • better-auth-integration - 使用 Better Auth 将会话／用户添加到 tRPC 上下文
  • optimistic-updates - 在服务端确认前更新 UI
  • infinite-queries - 基于游标的分页
  • subscriptions - 通过 WebSocket 实现实时更新

使用方法

阅读各个参考文件，了解详细说明和代码示例：

references/setup.md
references/routers.md
references/client-usage.md

每个参考文件都包含：

  • 代码示例及导入语句
  • 使用模式
  • 常见变体

常见问题

  1. 未发送 Cookie - 在 httpBatchLink fetch 中添加 credentials: "include"
  2. 水合不匹配 - 确保客户端和服务端都使用 superjson 转换器
  3. staleTime: 0 - 会导致每次挂载时都重新获取；大多数情况下请使用 30 秒或更长时间
  4. 缺少 HydrateClient - 预取的数据无法传递到客户端
  5. 未使用 cache() - getCaller/getQueryClient 必须用 React cache() 包装

资源

评论

支持 Markdown