🔺
TanStack Query · Server State

TanStack Query 完全指南

原 React Query——异步服务端状态管理的事实标准。自动缓存、请求去重、后台刷新,让"数据获取"从繁琐样板变成一行 Hook

自动缓存
请求去重
后台刷新
乐观更新
框架无关
v5 当前主版本
10 核心章节
4+ 框架适配

为什么需要 TanStack Query?

大多数前端应用的复杂度,其实不在"按钮怎么放",而在如何管理来自服务器的数据:加载中状态、错误状态、缓存、什么时候该重新请求、多个组件请求同一份数据怎么办、数据改了怎么让 UI 同步。传统做法是 useEffect + useState 手撸——写出的代码又长又易错,还得每个页面重复一遍。

TanStack Query 的洞见是:服务端状态(Server State)和客户端状态(Client State)本质不同。服务端状态是"远程的、异步的、可能过期的、被多人共享的",需要缓存、去重、后台同步这一整套机制。它把这套机制封装成 useQuery / useMutation 两个 Hook,附带 stale-while-revalidate 缓存策略、自动重试、窗口聚焦刷新、乐观更新——而且框架无关,React / Vue / Solid / Svelte 都有官方适配。

本教程 10 章从零讲到精通:服务端状态心智模型、useQuery 基础、缓存机制、分页与无限加载、useMutation 与乐观更新、查询失效、错误处理、高级组合模式、SSR 集成、以及完整实战与最佳实践。

核心能力

六大特性让 TanStack Query 成为服务端状态管理的事实标准

💾

自动缓存

以 queryKey 为索引缓存每份数据,重复访问秒开,无需手动管理内存。

🔗

请求去重

同一 queryKey 的并发请求自动合并成一次,多个组件共享同一份数据。

🔄

后台刷新

stale-while-revalidate:先返回缓存立即渲染,再后台悄悄拉新数据。

✏️

Mutation 与乐观更新

useMutation 处理写操作,乐观更新让 UI 先行、失败自动回滚。

🧩

框架无关

同一套核心,React/Vue/Solid/Svelte/Angular 都有官方适配包。

🛠️

DevTools

可视化每个查询的状态、缓存、fetch 时机,调试服务端状态一目了然。

课程目录

10 章从心智模型到生产实战,覆盖查询、缓存、变更、SSR 全链路

Chapter 01

认识 TanStack Query

服务端状态 vs 客户端状态、为何不用 useEffect+useState 手撸、缓存/去重/后台刷新的价值、安装 QueryClient 与 Provider。

入门 心智模型
Chapter 02

useQuery 基础

queryKey、queryFn、data/isLoading/isError/status、依赖查询 enabled、queryKey 数组设计原则。

useQuery queryKey
Chapter 03

缓存机制

staleTime vs gcTime、stale-while-revalidate、refetch 时机(focus/reconnect/mount)、缓存生命周期。

staleTime gcTime
Chapter 04

分页与无限加载

placeholderData/keepPreviousData 分页、useInfiniteQuery、getNextPageParam、虚拟滚动配合。

分页 Infinite
Chapter 05

useMutation

mutate/mutateAsync、onSuccess/onError/onSettled、变更后 invalidateQueries、乐观更新与 rollback。

mutation 乐观更新
Chapter 06

查询失效与手动更新

invalidateQueries、setQueryData 直改缓存、refetch、queryClient API、预取 prefetchQuery。

invalidate prefetch
Chapter 07

请求状态与错误处理

重试 retry、useQueryErrorResetBoundary、全局错误、loading/error UI 模式、Suspense 集成。

retry Suspense
Chapter 08

高级模式

select 数据转换、查询组合、parallel/dependent queries、useQueries、queryOptions 复用、类型安全。

select useQueries
Chapter 09

SSR 与框架集成

Next.js App Router hydration、prefetch + dehydrate/HydrationBoundary、Vue Query、Solid Query。

SSR Next.js
Chapter 10

实战与最佳实践

完整 CRUD 应用、queryKey factory 组织、自定义 hooks 封装、DevTools、性能优化清单、常见坑。

实战 最佳实践
⚒️ 配套开发者工具箱 · JSON / 正则 / 时间戳 / Cron 等 17 款免费在线工具