SuperAPI AI 工具集

start-routing-data

前端与建站

查看项目

更新于 10-26 16:21

技能介绍

用途

start-routing-data 聚焦 TanStack Start 特有的路由数据加载问题,而非通用 TanStack Router 或 TanStack Query API。它适用于在 Start 路由中接入数据、在 loader 中使用 TanStack Query、编写 mutation,以及按路由控制 SSR 的场景。

主要能力

  • 同构 loader:说明 Route.loader 在首次请求时运行于服务端、客户端导航时运行于客户端,因此不能在 loader 顶层访问 window 或 localStorage,应使用 ssr: false、'data-only' 或 useEffect 进行条件处理。
  • loader 中的 Query 预取:通过 context.queryClient.ensureQueryData() 在服务端预取,组件端用 useQuery 读取缓存;要求 loader 与组件共享同一个 queryOptions 工厂,避免缓存键不一致破坏 hydration 去重。
  • 选择性 SSR:支持按路由设置 ssr: true、false 或 'data-only';ssr 配置沿路由树下继承并只能收紧,子路由不能把父级的 ssr: false 改回 true。
  • 服务端函数变更:调用 createServerFn 处理写入后,使用 router.invalidate() 重新获取 loader 数据,或用 queryClient.invalidateQueries 失效 Query 缓存。
  • 模板:提供 Query 预取路由模板(query-loader-route.md)和选择性 SSR 路由模板(selective-ssr-route.md)。

使用方式

技能声明了强制性的代理工作流:实现前并行启动 explore-codebase(梳理 src/routes/、现有 loader、router.tsx、queryClient 接线)与 research-expert(通过 Context7 校验 Start API),并用 mcp__context7__query-docs 确认 loader、ssr、ensureQueryData 签名;实现后运行 sniper。文档给出的目录结构为 src/router.tsx 创建 router 并注入 queryClient,src/routes/ 下放置路由,src/queries/ 下放置共享的 queryOptions 工厂。loader 应直接返回 ensureQueryData 的 promise。

适用场景

适用于 TanStack Start 项目中需要 SSR 预取数据、按路由开关或降级 SSR、以及通过 server function 写入后刷新 UI 的路由开发。通用路由树、文件路由、搜索参数校验、useQuery/useMutation 基础机制与缓存配置属于另一技能 react-tanstack-router 的范围。

限制

资料未提供安装方式、依赖版本、收费信息或实际运行效果说明,这些内容暂未提供。