SuperAPI AI 工具集

data-loading

数据与分析

查看项目

更新于 10-15 23:40

技能介绍

用途:TanStack Router 中通过路由 loader 在进入路由前加载数据,并用 useLoaderData 消费。

主要能力:loader 返回数据;loaderDeps 声明影响缓存键的 search 参数,deps 变化即重新加载;内置 SWR 缓存,默认 staleTime 为 0、preloadStaleTime 为 30 秒、gcTime 为 30 分钟,可路由级或全局配置;pendingComponent/pendingMs/pendingMinMs 控制加载态;createRootRouteWithContext 注入路由上下文;loader 返回未 await 的 Promise 配合 Await 组件实现延迟加载;router.invalidate() 在变更后强制重跑 loader。

使用方式:createFileRoute 中定义 loader、loaderDeps、staleTime、gcTime、pendingComponent 等;代码分割组件用 getRouteApi 获取 useLoaderData;SSR 场景用 createServerFn 调用服务端逻辑,避免在 loader 中直接使用 fs、数据库或相对 fetch。

限制与注意:loader 默认在客户端运行,SSR 时两端都运行;不要在 loader/beforeLoad 中调用 React hooks,应通过 router context 注入;错误组件中应使用 router.invalidate() 而非 reset() 重跑 loader;createRootRouteWithContext 需双重调用;属性顺序影响 TypeScript 推断,建议 validateSearch → loaderDeps → beforeLoad → loader;loaderDeps 不要返回整个 search 对象。与 TanStack Query 同用时设 defaultPreloadStaleTime: 0 避免双重缓存。