TanStack 知识关系图 — TanStack 中文文档

按产品聚焦

获取机器图谱

课程 01TanStack 不是一个框架先别急着安装依赖。用一张地图理解 Start、Router 和 Query 如何各司其职。

选型 / 组合

工具职责边界

先判断问题属于全栈运行时、路由与 URL，还是异步服务端状态。

工程资料 / decisionRouter Loader 还是 Query？根据导航关键性和数据生命周期选择 Loader、Query 或两者组合。

课程 02创建第一个 Start 应用使用官方 CLI 创建最小项目，认识路由树、根文档和开发服务器。

服务端 / RPC

Start 服务端边界

理解 SSR、Server Function 与外部 Server Route 分别在哪个边界执行。

工程资料 / recipe创建只在服务端执行的函数使用 createServerFn 定义同源、类型安全的服务端 RPC。

课程 03用文件组成路由树创建 Issue 列表和详情页，理解文件名、路径参数和类型推断如何连在一起。

路径 / 参数

文件路由与参数

让文件结构、路径参数和 Link 在同一个类型系统中协作。

工程资料 / recipe创建带路径参数的文件路由在 React 应用中创建 /posts/$postId，并从路由实例读取类型安全的 postId。

课程 04把筛选条件放进 URL用经过验证的 Search Params 实现可分享、可刷新、有类型的 Issue 筛选。

筛选 / 分页

经过验证的 URL 状态

把可分享、可刷新、可前进后退的筛选状态放进经过验证的 Search Params。

工程资料 / recipe验证分页与筛选参数将不可信的 URL 搜索参数转换为稳定、有类型的路由输入。

课程 05让 Loader 预热 Query 缓存Router 决定何时导航，Query 决定数据如何缓存；用同一份 queryOptions 把两者接起来。

Loader / Query

导航与异步缓存

Router 协调何时导航，Query 拥有数据缓存与重新获取生命周期。

工程资料 / decisionRouter Loader 还是 Query？根据导航关键性和数据生命周期选择 Loader、Query 或两者组合。工程资料 / recipe在路由 Loader 中预取 Query为 SSR 创建请求级 QueryClient，并让 Loader 与 useSuspenseQuery 使用相同 queryOptions。

课程 06从 Server Function 写回缓存验证网络边界上的输入，通过 Mutation 表达写入状态，再用服务端响应不可变地更新 Query 缓存。

Mutation / 失效

写入与缓存一致性

验证写入边界，并根据服务端响应选择直接更新或失效缓存。

工程资料 / recipe用 Mutation 响应更新缓存当写入响应包含完整实体时用 setQueryData；无法推导正确缓存时改用 invalidateQueries。

课程 07把错误关在正确的路由里用全局默认错误界面兜底，用 route errorComponent 隔离局部数据或渲染失败。

错误 / 重试

失败隔离与恢复

让错误在最近的路由边界停止，并向用户提供稳定的恢复路径。

工程资料 / error隔离路由 Loader 与渲染错误为全局 Router 设置默认错误组件，并在需要独立恢复的路由上覆盖 errorComponent。

课程 08把外部入口放进 Server Route区分应用内部 RPC 与公开 HTTP 端点，并用原生 Response 明确表达状态码、正文和缓存策略。

Server Route / HTTP

外部 HTTP 边界

用 Server Route 为第三方调用方明确表达状态码、缓存、安全和输入契约。

工程资料 / recipe创建外部可调用的 Server Route为第三方调用方建立原生 HTTP 端点，并显式返回状态、缓存和安全响应。

课程 09用 Router Context 传递依赖在根路由声明类型化依赖，再通过 beforeLoad 为一棵子路由追加经过推导的上下文。

Context / beforeLoad

类型化路由依赖

从根路由注入稳定依赖，并通过 beforeLoad 为子树追加可推导的上下文。

工程资料 / contract建立类型化 Router Context在根路由声明依赖，并通过 beforeLoad 为子树追加可推导的派生上下文。

课程 10先定义数据何时算新鲜分清 staleTime 与 gcTime，用共享 queryOptions 把查询键、请求函数和时间策略放在一起。

staleTime / gcTime

缓存新鲜度策略

分别定义数据何时陈旧，以及 inactive 查询应在缓存中保留多久。

工程资料 / contract定义 Query 新鲜度契约根据数据变化频率设置 staleTime，并独立决定 inactive 缓存的 gcTime。

课程 11用 Middleware 组合请求边界区分请求中间件与 Server Function 中间件，并用 next() 组合日志、上下文和安全检查。

Middleware / next

服务端请求执行链

为请求和 Server Function 选择正确中间件作用域，并显式推进执行链。

工程资料 / contract建立 Start Middleware 执行链明确请求级与函数级作用域，通过 next() 组合上下文，并保留认证和 CSRF 边界。

课程 13让 Query 取消真正传到网络层消费 queryFn 提供的 AbortSignal，让失效的 fetch 停止并理解取消后的缓存状态。

AbortSignal / fetch

异步请求取消

把 Query 的 AbortSignal 传到网络层，停止过期 I/O 并保持缓存状态一致。

工程资料 / contract消费 Query 的 AbortSignal将 queryFn signal 传入底层请求，使取消停止 I/O，并保留明确的缓存回滚语义。

课程 14在加载子路由前确认身份用类型化 Router Context 和 pathless layout 的 beforeLoad 保护一组页面，同时保留正确的登录回跳地址。

beforeLoad / redirect

认证门禁与服务端授权

在父 beforeLoad 阻止私有子路由加载，同时把资源级授权留在服务端数据边界。

工程资料 / recipe用 beforeLoad 保护路由子树在 pathless layout 中读取类型化认证 Context，阻止未登录用户加载子路由，并保留经过约束的回跳 URL。

课程 15让无限列表保持有界和可恢复用 initialPageParam、游标和 maxPages 建立明确的翻页契约，同时保持 pages 与 pageParams 的结构一致。

pageParam / maxPages

有界无限分页

让服务端游标驱动页面参数，并保持 pages、pageParams 与内存边界一致。

工程资料 / recipe建立有界的游标 Infinite Query用一份 queryKey 管理整个列表，让服务端游标驱动 pageParam，并用 maxPages 控制缓存与重取成本。

课程 16在请求之间隔离并流式恢复 Query用 Router SSR Query 集成自动完成脱水、恢复和流式传输，并为每个服务端请求创建独立缓存。

SSR / hydration

Query SSR 与流式恢复

按服务端请求隔离 QueryClient，并为关键数据选择阻塞、恢复或流式传输。

工程资料 / contract配置 Query SSR 与流式恢复为每个 SSR 请求创建 QueryClient，通过官方 Router 集成脱水与恢复，并明确阻塞和流式查询。

课程 17让乐观更新可以安全回滚先选择 UI 级临时结果或缓存级更新，再用取消、快照、回滚和重新验证处理失败与并发。

onMutate / rollback

乐观一致性与回滚

用取消、快照、不可变写入和重新验证，让即时反馈最终回到服务端事实。

工程资料 / recipe实现可回滚的乐观更新取消冲突重取、保存缓存快照、不可变写入草稿，并在失败时回滚、完成时重新验证。

课程 18把 Issue 数据组织成无头表格用类型化列定义、核心行模型和 flexRender 连接数据与语义化 table 标记，同时保留完整的样式控制权。

ColumnDef / row model

无头表格与服务端状态

用类型化列和行模型描述视图，并让排序、分页与远程数据各自拥有清晰边界。

工程资料 / contract协调服务端表格的排序与分页状态让 Table 管视图状态、Query 管远程数据，并用 manualSorting、manualPagination 与 rowCount 避免只处理当前页。

课程 19让字段、校验与提交共享同一类型用 useForm、Field 与 Subscribe 建立受控表单，把校验时机、错误显示和异步提交状态写成显式契约。

Field / validator

表单校验与提交边界

让字段类型、同步与异步校验、提交状态协作，同时保留服务端最终验证。

工程资料 / contract为字段异步校验建立安全边界先同步过滤无效输入，再用内置 debounce 执行异步校验，并把提前反馈与最终服务端验证明确分开。

一组工程事实，两条阅读路径。