原 React Query——异步服务端状态管理的事实标准。自动缓存、请求去重、后台刷新,让"数据获取"从繁琐样板变成一行 Hook
大多数前端应用的复杂度,其实不在"按钮怎么放",而在如何管理来自服务器的数据:加载中状态、错误状态、缓存、什么时候该重新请求、多个组件请求同一份数据怎么办、数据改了怎么让 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:先返回缓存立即渲染,再后台悄悄拉新数据。
useMutation 处理写操作,乐观更新让 UI 先行、失败自动回滚。
同一套核心,React/Vue/Solid/Svelte/Angular 都有官方适配包。
可视化每个查询的状态、缓存、fetch 时机,调试服务端状态一目了然。
10 章从心智模型到生产实战,覆盖查询、缓存、变更、SSR 全链路
服务端状态 vs 客户端状态、为何不用 useEffect+useState 手撸、缓存/去重/后台刷新的价值、安装 QueryClient 与 Provider。
queryKey、queryFn、data/isLoading/isError/status、依赖查询 enabled、queryKey 数组设计原则。
staleTime vs gcTime、stale-while-revalidate、refetch 时机(focus/reconnect/mount)、缓存生命周期。
placeholderData/keepPreviousData 分页、useInfiniteQuery、getNextPageParam、虚拟滚动配合。
mutate/mutateAsync、onSuccess/onError/onSettled、变更后 invalidateQueries、乐观更新与 rollback。
invalidateQueries、setQueryData 直改缓存、refetch、queryClient API、预取 prefetchQuery。
重试 retry、useQueryErrorResetBoundary、全局错误、loading/error UI 模式、Suspense 集成。
select 数据转换、查询组合、parallel/dependent queries、useQueries、queryOptions 复用、类型安全。
Next.js App Router hydration、prefetch + dehydrate/HydrationBoundary、Vue Query、Solid Query。
完整 CRUD 应用、queryKey factory 组织、自定义 hooks 封装、DevTools、性能优化清单、常见坑。