SuperAPI AI 工具集

tanstack-query

前端与建站

查看项目

更新于 10-15 23:31

技能介绍

用途:在 React 应用中管理服务端状态,基于 @tanstack/react-query v5(资料版本 5.90.19,devtools 5.91.2),要求 React 18.0+、推荐 TypeScript 4.7+。

主要能力:useMutationState 跨组件追踪 mutation 状态,无需逐层传参;简化乐观更新,通过 variables 展示待处理项,无需手动改缓存或回滚;throwOnError 配合错误边界(由 useErrorBoundary 更名);networkMode 支持 online/always/offlineFirst,适配离线与 PWA;useQueries 的 combine 合并并行查询结果;infiniteQueryOptions 类型安全工厂;maxPages 限制无限查询缓存页数(需同时提供 getNextPageParam 与 getPreviousPageParam)。

使用方式:安装 npm install @tanstack/react-query@latest 与 npm install -D @tanstack/react-query-devtools@latest;用 QueryClientProvider 包裹应用并配置 staleTime、gcTime 等默认项;用 queryOptions 工厂定义查询,useQuery/useMutation 消费,mutation 成功后 invalidateQueries 刷新。

关键规则:所有 hook 使用对象语法与数组 queryKey;初始加载用 isPending;queryFn 中抛出错误;用 gcTime 替代 cacheTime;查询不再支持 onSuccess/onError/onSettled,改用 useEffect 或 mutation 回调;无限查询必须提供 initialPageParam;useSuspenseQuery 不支持 enabled,改用条件渲染;错误查询需用 retryOnMount 而非 refetchOnMount。

适用场景:React 数据获取、缓存、乐观更新、离线优先与无限滚动列表。

限制:资料未提供收费、价格与平台信息;流式服务端组件水合存在已知问题(v5.82.0+),建议 await prefetch 或避免按 fetchStatus 条件渲染。