SuperAPI AI 工具集

tanstack-query

编程与开发

查看项目

更新于 10-16 02:35

技能介绍

用途:TanStack Query 是异步状态管理器,本身不抓取数据,需要你提供返回 Promise 的 queryFn,由它负责缓存、去重、后台更新与过期数据管理。适用于服务端状态与客户端状态的区分管理。

主要能力:useQuery 支持 queryKey、queryFn、staleTime、gcTime、select 等配置;queryOptions 可复用于 useQuery、useSuspenseQuery、prefetchQuery、invalidateQueries。Query Key Factory 模式把 key 与 options 分离,实现按 all、lists、list(filters)、detail(id) 粒度的缓存失效。useMutation 支持 onSuccess 中调用 invalidateQueries。还支持无限查询、SSR,以及与 server functions 配合的预取和 ensureQueryData。

状态字段:isPending 表示尚无数据;isLoading 表示首次加载且无缓存;isFetching 表示任意抓取(含后台刷新);另有 isSuccess、isError。

常见默认值:staleTime 为 0,gcTime 为 5 分钟,retry 为 3,refetchOnWindowFocus 为 true,enabled 为 true。

使用方式:渲染遵循 data → error → isPending 的数据优先模式;queryFn 内参数必须出现在 queryKey 中;QueryClient 应在组件外或 useState 中创建一次。表单集成有“复制到表单状态”和“派生状态”两种方式。

限制与常见错误:fetch 对 4xx/5xx 不 reject,需在 queryFn 内主动抛出;不要用 refetch() 处理参数变化,应把参数放进 queryKey;useQuery 与 useInfiniteQuery 不要共用同一 key;避免把服务端状态复制到 useState;不要依赖已废弃的 onSuccess 做状态同步。资料还建议在实现查询后交由 code-reviewer agent 评审。