TanStack Query(React Query)v5 用于在 React 中管理服务器状态,当前资料标注为生产可用,依赖 React 18.0+,推荐 TypeScript 4.7+,最新版本为 @tanstack/react-query@5.90.5 与 @tanstack/react-query-devtools@5.90.2。
主要能力:用 useQuery({ queryKey, queryFn }) 声明式获取数据,用 useMutation({ mutationFn }) 提交变更;通过 QueryClient 的 defaultOptions 配置缓存策略,包括 staleTime(数据新鲜时长)、gcTime(v5 中由 cacheTime 改名,控制非活跃数据在缓存中的保留时间)、retry、refetchOnWindowFocus、refetchOnReconnect、refetchOnMount;支持 queryOptions 工厂复用查询配置,并可用于 useQuery、useSuspenseQuery、prefetchQuery。
使用方式:安装 npm install @tanstack/react-query@latest 与 npm install -D @tanstack/react-query-devtools@latest;创建 QueryClient 后用 QueryClientProvider 包裹整个应用,并可放入 ReactQueryDevtools(仅开发环境,生产构建会被 tree-shaking 移除)。查询用 isPending 表示尚无数据且正在请求,isError/error 处理错误;queryFn 中应抛出错误。变更后在 onSuccess 中调用 queryClient.invalidateQueries({ queryKey: ['todos'] }) 触发后台刷新;需要即时反馈时可用 onMutate 取消请求、快照旧数据并乐观更新,onError 回滚,onSettled 重新拉取。错误可由 QueryErrorResetBoundary 配合 throwOnError 交给错误边界处理。
限制与注意事项:v5 不再支持 v4 的数组/函数式参数写法,查询也不再支持 onSuccess/onError/onSettled 回调;需使用对象语法与数组 queryKey,并使用 gcTime 而非 cacheTime;staleTime 默认为 0,建议按场景调整以避免过度请求;乐观更新不适合支付、账户设置等关键数据。分类与更多平台支持等信息暂未提供。