SuperAPI AI 工具集

tanstack-integration-best-practices

数据与分析

查看项目

更新于 10-16 08:35

技能介绍

用途:为 TanStack Query、TanStack Router 和 TanStack Start 的集成提供最佳实践规则,适用于新建 TanStack Start 项目、将 Query 与 Router 集成、配置带查询水合的 SSR、协调路由与查询缓存、以及搭建类型安全的数据获取模式。\n\n主要能力按优先级分为:关键级 Setup(3 条规则,基础配置)与 SSR Integration(1 条规则,Router+Query SSR 设置);高级 Data Flow(4 条规则,正确的数据获取模式);中级 Caching(3 条规则,性能优化)与额外 SSR(2 条规则)。\n\n规则要点:setup 前缀含 setup-query-client-context(通过 router context 传递 QueryClient)、setup-provider-wrapping(正确用 QueryClientProvider 包裹)、setup-stale-time-coordination(协调 router 与 query 的 staleTime);flow 前缀含 flow-loader-query-pattern(loader 搭配 ensureQueryData)、flow-suspense-query-component(组件内使用 useSuspenseQuery)、flow-mutations-invalidation(变更与查询失效协调)、flow-server-functions-queries(用 server functions 作为查询函数);cache 前缀含 cache-single-source(由 TanStack Query 统一管理缓存)、cache-preload-coordination(协调 router 与 query 的预加载)、cache-invalidation-patterns(统一失效模式);ssr 前缀含 ssr-dehydrate-hydrate(用 setupRouterSsrQueryIntegration 实现自动 SSR)、ssr-per-request-client(每请求创建 QueryClient)、ssr-streaming-queries(处理流式查询)。\n\n使用方式:rules/ 目录中每个规则文件包含解释(为什么该模式重要)、Bad Example(需避免的反模式)、Good Example(推荐实现)、Context(何时适用或跳过)。具体代码示例需查阅各规则文件;安装命令、收费与平台等信息暂未提供。