SuperAPI AI 工具集

tanstack-query

通用与其它

查看项目

更新于 10-15 17:27

技能介绍

用途:为任何可从缓存或状态管理受益的异步操作提供统一方案,包括服务端数据获取、变更、无限查询、乐观更新与后台刷新。不覆盖 URL 状态管理(建议 nuqs)、同步分组状态(建议 ahooks.useSetState)与 localStorage 持久化(建议 ahooks.useLocalStorageState)。

主要能力:自动缓存、请求去重、后台重新获取、stale-while-revalidate;通过 useQuery、useMutation、useInfiniteQuery 等 hooks 提供 isLoading、error 等状态,无需手动维护。queryFn 可为任意返回 Promise 的函数,不限于 HTTP 调用,也适用于本地计算、localStorage 读取与文件操作。

使用方式:应用根部配置 QueryClientProvider 与 QueryClient 默认项(如 staleTime、retry、refetchOnWindowFocus)。所有查询键须用 @lukemorales/query-key-factory 集中定义,如 createQueryKeys('users', {...}),并以 users.detail(userId) 形式调用。失效推荐按命名空间:queryClient.invalidateQueries({ queryKey: users._def })。可将查询逻辑抽取为自定义 hooks,并用 TypeScript 泛型保证类型安全。

约束:必须使用查询键工厂,不得手动构造查询键(如 ['users', id])或在失效时硬编码键;不得手动管理 loading/error 状态;一次性且无需缓存的 Promise 应使用普通 async/await。

适用场景:服务端数据获取、变更与乐观更新、分页无限滚动、依赖 URL 参数的查询、由 OpenAPI 生成的客户端 hooks(如 @repo/react)。

限制:要求 TanStack Query v5+、React 18+、TypeScript v5+;假定已配置 QueryClientProvider。价格、收费与其他平台细节暂未提供。