用途:在 TanStack Router 与 TanStack Query 之间建立集成,让路由 loader 在导航完成前预取查询数据,从而消除请求瀑布、提升 SPA 导航的即时感,同时保留查询缓存的去重能力。
主要能力:使用 queryClient.ensureQueryData 在 loader 中预取;推荐 queryOptions 模式以复用配置并保证类型安全;支持在 loader 中用 Promise.all 并行预取多个查询,以及先取用户再取用户文章的依赖查询;区分 prefetchQuery(不等待)、ensureQueryData(等待并尊重缓存与 staleTime)和 fetchQuery(忽略缓存强制刷新);支持 loader 错误处理与 errorComponent、变更后 setQueryData 与 invalidateQueries、Link 的 preload="intent" 悬停预加载、搜索参数校验配合查询、useSuspenseQuery 的 Suspense 模式,以及开发期挂载 Router 与 Query DevTools(生产环境自动隐藏)。
使用方式:导出全局 queryClient 并在 QueryClientProvider 中包裹 RouterProvider;在 createFileRoute 的 loader 中调用 queryClient.ensureQueryData(userQueryOptions(params.userId));组件内用 useQuery 或 useSuspenseQuery 读取同一 queryKey 的数据。
适用场景:React SPA 中需要快速页面切换、列表与详情、编辑表单预填充、依赖数据加载等场景。
限制:资料未提供具体安装命令、版本要求、性能基准数据或收费信息;示例基于 React 与 TypeScript,其他框架适配情况暂未提供。