SuperAPI AI 工具集

tanstack-query

通用与其它

查看项目

更新于 10-15 22:10

技能介绍

用途:TanStack Query v5(即 React Query)是面向 React 的服务端状态管理方案,用于数据获取、缓存、变更(mutation)与缓存失效,并帮助处理从 v4 迁移、数据过期、失效等问题。

主要能力:提供 useQuery、useMutation、useInfiniteQuery、useQueries 等钩子,支持 staleTime、gcTime、重试、窗口聚焦重取、网络重连重取等配置;支持依赖查询、并行查询、预取、无限滚动、乐观更新与错误边界等模式。

使用方式:先安装依赖,例如 pnpm add @tanstack/react-query@latest @tanstack/react-query-devtools@latest(也可用 npm install 或 bun add)。随后创建 QueryClient 并用 QueryClientProvider 包裹整个应用,DevTools 需放在 Provider 内部。查询使用对象语法 useQuery({ queryKey, queryFn }),查询键用数组;变更使用 useMutation,并在 onSuccess 中调用 queryClient.invalidateQueries({ queryKey: ['todos'] }) 触发后台重取。

关键限制:v5 要求 React 18+(依赖 useSyncExternalStore),TypeScript 4.9+(推荐 5.x)。v5 有破坏性变更:查询不再支持 onSuccess/onError/onSettled 回调;cacheTime 改名为 gcTime;isLoading 含义变为“pending 且 fetching”,初始加载应使用 isPending;无限查询必须提供 initialPageParam;keepPreviousData 由 placeholderData 替代;useSuspenseQuery 不支持 enabled。默认 staleTime 为 0、gcTime 为 5 分钟、浏览器端 retry 为 3、服务端为 0,refetchOnWindowFocus 与 refetchOnReconnect 默认开启。

适用场景:React 应用中的数据获取与缓存、变更后失效、分页与无限滚动、预取、乐观更新及 v4 到 v5 的迁移排错。

其他:资料未提供收费、价格与平台支持等具体信息。