SuperAPI AI 工具集

tanstack-query

编程与开发

查看项目

更新于 10-16 01:15

技能介绍

用途:TanStack Query 是面向 TypeScript/JavaScript 的异步状态管理器,用于缓存、后台重新获取和服务器状态同步。资料强调其 API 在不同版本间会变化,记忆中的写法可能已过时或废弃,因此在编写代码前必须先通过 WebFetch 读取在线文档核实:WebFetch("https://tanstack.com/llms.txt"),未获取该 URL 前不要继续,也不要假设某个 API 存在。

主要能力与用法要点:

查询键:需保持稳定且有结构,使用带逻辑层级的数组,例如 ['todos', { status: 'active' }]。键按序列化值而非引用做哈希,真正的问题在于键内容每次渲染都变化,会导致不必要的重新获取。

staleTime:默认是 0 而不是 infinity,即获取后数据立即被视为过期,每次挂载和窗口聚焦都会触发后台重新获取。应有意识地设置,例如 staleTime: 60_000,以避免多余的网络请求。

变更后失效:变更成功后不要手动合并数据,而应调用 queryClient.invalidateQueries({ queryKey: ['todos'] }) 让 Query 重新获取最新数据;务必限定范围,无参数的 invalidateQueries() 会使缓存中所有查询失效。

gcTime(原 cacheTime):控制不再使用的数据何时被垃圾回收,默认 5 分钟。组件卸载后查询不会立即移除,缓存数据在该时间窗内仍可用,这是为返回导航有意设计的,但会出乎期待即时清理的开发者意料。

状态管理边界:不要把服务器状态放进另外的全局存储,TanStack Query 本身就是服务器状态管理器;在其之上再加 Redux 或 Zustand 处理异步数据会造成重复。其他存储应仅保留纯客户端的 UI 状态。

限制与未提供信息:资料未提供安装命令、版本号、收费方式、具体框架适配细节或完整代码示例,这些内容暂未提供,使用时应以在线文档为准。