学习路径 — TanStack 中文文档

交互实验

把四个概念放到真实界面里运行。

筛选会进入 URL，Loader 会预取 Query，创建操作通过 Server Function 回写缓存。你可以边操作，边对照课程。

打开 Mini Issue Tracker

PATH / 001–19

课程路线图

每课都有目标、心智模型、实现、错误和检查点。

01TanStack · 入门TanStack 不是一个框架先别急着安装依赖。用一张地图理解 Start、Router 和 Query 如何各司其职。8 分钟 02TanStack Start · 入门创建第一个 Start 应用使用官方 CLI 创建最小项目，认识路由树、根文档和开发服务器。12 分钟 03TanStack Router · 核心用文件组成路由树创建 Issue 列表和详情页，理解文件名、路径参数和类型推断如何连在一起。15 分钟 04TanStack Router · 核心把筛选条件放进 URL用经过验证的 Search Params 实现可分享、可刷新、有类型的 Issue 筛选。18 分钟 05TanStack Query · 核心让 Loader 预热 Query 缓存Router 决定何时导航，Query 决定数据如何缓存；用同一份 queryOptions 把两者接起来。22 分钟 06TanStack Query · 实践从 Server Function 写回缓存验证网络边界上的输入，通过 Mutation 表达写入状态，再用服务端响应不可变地更新 Query 缓存。24 分钟 07TanStack Router · 可靠性把错误关在正确的路由里用全局默认错误界面兜底，用 route errorComponent 隔离局部数据或渲染失败。16 分钟 08TanStack Start · 实践把外部入口放进 Server Route区分应用内部 RPC 与公开 HTTP 端点，并用原生 Response 明确表达状态码、正文和缓存策略。18 分钟 09TanStack Router · 核心用 Router Context 传递依赖在根路由声明类型化依赖，再通过 beforeLoad 为一棵子路由追加经过推导的上下文。20 分钟 10TanStack Query · 核心先定义数据何时算新鲜分清 staleTime 与 gcTime，用共享 queryOptions 把查询键、请求函数和时间策略放在一起。20 分钟 11TanStack Start · 进阶用 Middleware 组合请求边界区分请求中间件与 Server Function 中间件，并用 next() 组合日志、上下文和安全检查。22 分钟 12TanStack Router · 进阶在离开脏表单前阻止导航用 useBlocker 同时处理路由内导航与浏览器卸载，并为自定义确认界面建立明确状态。18 分钟 13TanStack Query · 进阶让 Query 取消真正传到网络层消费 queryFn 提供的 AbortSignal，让失效的 fetch 停止并理解取消后的缓存状态。16 分钟 14TanStack Router · 进阶在加载子路由前确认身份用类型化 Router Context 和 pathless layout 的 beforeLoad 保护一组页面，同时保留正确的登录回跳地址。22 分钟 15TanStack Query · 进阶让无限列表保持有界和可恢复用 initialPageParam、游标和 maxPages 建立明确的翻页契约，同时保持 pages 与 pageParams 的结构一致。24 分钟 16TanStack Query · 生产在请求之间隔离并流式恢复 Query用 Router SSR Query 集成自动完成脱水、恢复和流式传输，并为每个服务端请求创建独立缓存。26 分钟 17TanStack Query · 生产让乐观更新可以安全回滚先选择 UI 级临时结果或缓存级更新，再用取消、快照、回滚和重新验证处理失败与并发。25 分钟 18TanStack Table · 入门把 Issue 数据组织成无头表格用类型化列定义、核心行模型和 flexRender 连接数据与语义化 table 标记，同时保留完整的样式控制权。24 分钟 19TanStack Form · 入门让字段、校验与提交共享同一类型用 useForm、Field 与 Subscribe 建立受控表单，把校验时机、错误显示和异步提交状态写成显式契约。25 分钟