SuperAPI AI 工具集

tanstack-integration-best-practices

数据与分析

查看项目

更新于 10-15 21:41

技能介绍

用途:为同时使用 TanStack Query、TanStack Router 和 TanStack Start 的项目提供集成规范,确保数据流、缓存协调与类型安全。

适用时机:新建 TanStack Start 项目、将 Query 与 Router 集成、配置带查询水合的 SSR、协调路由与查询缓存、建立类型安全的数据获取模式。

规则按优先级分类:CRITICAL 的 Setup(3 条,基础配置)与 SSR Integration(1 条,Router + Query SSR 设置);HIGH 的 Data Flow(4 条,正确数据获取模式);MEDIUM 的 Caching(3 条,性能优化)与 SSR(2 条,额外 SSR 模式)。

规则清单:setup-query-client-context(通过 router context 传递 QueryClient)、setup-provider-wrapping(正确包裹 QueryClientProvider)、setup-stale-time-coordination(协调 router 与 query 的 staleTime);flow-loader-query-pattern(loader 配合 ensureQueryData)、flow-suspense-query-component(组件中使用 useSuspenseQuery)、flow-mutations-invalidation(mutation 与查询失效协调)、flow-server-functions-queries(用 server functions 作为查询函数);cache-single-source(由 TanStack Query 统一管理缓存)、cache-preload-coordination(协调 router 与 query 预加载)、cache-invalidation-patterns(统一失效模式);ssr-dehydrate-hydrate(用 setupRouterSsrQueryIntegration 自动 SSR)、ssr-per-request-client(每请求创建 QueryClient)、ssr-streaming-queries(处理流式查询)。

使用方式:rules/ 目录下每个规则文件包含 Explanation(为何重要)、Bad Example(应避免的反模式)、Good Example(推荐实现)、Context(何时适用或跳过)。详细指导与代码示例见各规则文件。

限制:资料未提供具体安装命令、版本要求、收费信息或平台支持范围。