SuperAPI AI 工具集

tanstack-query-intent-core-understand-query-internals-a-8ab976f4

测试与质量

查看项目

更新于 10-16 00:02

技能介绍

用途:解释或调试 TanStack Query 的内部结构,帮助区分缓存、查询与观察者三者的职责与关系。

核心模型:QueryClient 持有缓存;QueryCache 存储 Query 实例;Hooks 与适配器 API 创建 QueryObserver,把组件订阅到某个查询上。select、staleTime、轮询等观察者级选项以及追踪式结果访问,决定每个组件看到的内容。非活跃查询可以存在于缓存中而没有活跃观察者,可被命令式读取、水合、失效或垃圾回收,但这不等同于组件正在主动观察查询状态。

主要用法:UI 读取用观察者,例如 useQuery({ queryKey: ['todo', id], queryFn: () => fetchTodo(id) });缓存编排用 QueryClient,例如 await queryClient.ensureQueryData(todoOptions(id))、queryClient.invalidateQueries({ queryKey: ['todo', id] })、queryClient.setQueryData(['todo', id], (old) => old && { ...old, title })。

常见错误:把缓存中存在当作正在活跃使用(应通过 useQuery 读取而不是 getQueryData 直接渲染);以为一个查询只有一套选项(staleTime 等属于观察者级,需查看 observer.options);调试时不检查观察者数量(失效可用 refetchType: 'active',非活跃查询不会自动重取)。资料未提供更多平台、限制或收费信息。