关于 tanstack-integration-best-practices
用于整合 TanStack Query、Router 和 Start 的实践指南，重点说明数据流、缓存、类型安全及服务端渲染的协同模式。
主要功能
- 01Query 客户端与 Provider 配置
- 02Router 与 Query 数据流
- 03Mutation 与缓存失效
- 04预加载协调
- 05SSR 水合与流式查询
- 06按请求创建 Query 客户端
适用场景
- 01启动 TanStack Start 项目
- 02整合 Query 与 Router
- 03配置 SSR 查询水合
- 04协调 Router 与 Query 缓存
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/tanstack-integration-best-practices确认已加载。
包含的文件
除 SKILL.md 外，安装时一起下载的参考资料和脚本。
rules/cache-single-source.mdflow-loader-query-pattern.mdsetup-query-client-context.mdssr-dehydrate-hydrate.md详细介绍
TanStack 集成最佳实践
有效集成 TanStack Query、Router 和 Start 的指南。这些模式可确保整个技术栈实现最佳数据流、缓存协调和类型安全。
适用场景
- 搭建新的 TanStack Start 项目
- 将 TanStack Query 与 TanStack Router 集成
- 配置带查询水合的 SSR
- 协调 Router 与 Query 之间的缓存
- 设置类型安全的数据获取模式
按优先级划分的规则类别
| 优先级 | 类别 | 规则 | 影响 |
|---|---|---|---|
| CRITICAL | 设置 | 3 条规则 | 基础配置 |
| CRITICAL | SSR 集成 | 1 条规则 | Router + Query SSR 设置 |
| HIGH | 数据流 | 4 条规则 | 正确的数据获取模式 |
| MEDIUM | 缓存 | 3 条规则 | 性能优化 |
| MEDIUM | SSR | 2 条规则 | 其他 SSR 模式 |
快速参考
设置（前缀：setup-）
setup-query-client-context— 通过 Router 上下文传递 QueryClientsetup-provider-wrapping— 正确使用 QueryClientProvider 包装setup-stale-time-coordination— 协调 Router 与 Query 之间的 staleTime
数据流（前缀：flow-）
flow-loader-query-pattern— 将 Loader 与 ensureQueryData 配合使用flow-suspense-query-component— 在组件中使用 useSuspenseQueryflow-mutations-invalidation— 协调变更操作与查询失效flow-server-functions-queries— 使用服务端函数作为查询函数
缓存（前缀：cache-）
cache-single-source— 让 TanStack Query 管理缓存cache-preload-coordination— 协调 Router 与 Query 之间的预加载cache-invalidation-patterns— 统一的失效模式
SSR 集成（前缀：ssr-）
ssr-dehydrate-hydrate— 使用 setupRouterSsrQueryIntegration 自动处理 SSR
其他 SSR（前缀：ssr-）
ssr-per-request-client— 为每个请求创建 QueryClientssr-streaming-queries— 处理查询的流式传输
使用方法
rules/ 目录中的每个规则文件都包含：
- 说明 — 此模式为何重要
- 错误示例 — 应避免的反模式
- 正确示例 — 推荐的实现方式
- 上下文 — 何时应用或跳过此规则
完整参考
有关详细指南和代码示例，请参阅 rules/ 目录中的各个规则文件。
评论
支持 Markdown