SuperAPI AI 工具集

tanstack-query-intent-core-design-query-keys-and-options

设计与创作

查看项目

更新于 10-16 00:02

技能介绍

用途:本资料聚焦 TanStack Query 中查询意图的核心设计,即查询键(queryKey)与查询选项(queryOptions 等)的写法规范,用于保证缓存身份唯一、数据获取行为与类型推断集中管理。

主要能力与用法:

  1. 将每个查询变量都放入 key,例如 queryKey: ['projects', teamId, page],避免不同数据因 key 不完整而合并;
  2. 用共享的选项工厂统一管理,如 todoOptions(todoId) 返回 queryOptions({ queryKey: ['todo', todoId], queryFn, staleTime }),供 useQuery、preload 等复用;
  3. 用 skipToken 表达“类型安全的缺席”,如 queryFn: todoId ? async () => ({...}) : skipToken;
  4. 涉及 queryFn、queryOptions、infiniteQueryOptions、mutationOptions、key factories、TypeScript 推断等。

适用场景:设计缓存键、跨 hook 与预取共享查询配置、需要条件查询或类型推导的 React 项目。

限制与常见错误:key 缺失变量会把不同数据合并;key 与 queryFn 漂移需靠 options 工厂保持一致;skipToken 不能用于 useSuspenseQuery,Suspense 查询必须有确定的 queryFn。补充的 ESLint 规则可强制检查键与选项错误。