SuperAPI AI 工具集

tanstack-query-intent-core-seed-placeholder-select-and-5c98438e

编程与开发

查看项目

更新于 10-16 00:02

技能介绍

用途:这是一份针对 TanStack Query(React)的决策与用法技能,帮助开发者在 initialData、initialDataUpdatedAt、placeholderData、keepPreviousData、select、数据转换与缓存预填、列表数据预填详情等方案之间做出选择。

主要能力与用法:

  1. 分页保留旧数据:从 '@tanstack/react-query' 导入 keepPreviousData 与 useQuery,在 useQuery 中设置 placeholderData: keepPreviousData,用于翻页时保留上一页数据。
  2. 用列表预填详情缓存:通过 queryClient.getQueryData(['todos'])?.find(...) 作为 initialData 返回,为详情查询预填已有数据。
  3. select 取最小形状:在查询中设置 select: (todos) => todos.length,按需派生最小数据形状。
  4. 全局形状转换:使用 queryOptions 的 queryFn 内做 map 等转换,使缓存整体保存转换后的形状。

常见错误与限制:

  • initialData 会作为真实数据写入缓存并可能被当作有效数据,而 placeholderData 仅作用于当前观察者(observer-local);若只想临时占位,不要用 initialData。
  • v5 已移除 keepPreviousData 选项,改用 placeholderData: keepPreviousData。
  • 不要在 select 中做可能抛错的处理(如直接取 todos[0].id),应使用可选链与空值兜底,因为 select 只转换成功数据,不负责建模请求错误。

适用场景:React 中使用 TanStack Query 处理列表—详情缓存、分页切换与数据形状裁剪时。资料未提供更多平台、收费或版本兼容细节。