SuperAPI AI 工具集

frontend-data-fetching-cache-contracts

前端与建站

查看项目

更新于 10-16 06:44

技能介绍

用途:面向客户端数据读取与缓存环节,处理读取结果陈旧、请求浪费、缓存命中错误等问题。写入与回滚属于同组另一技能。

主要能力与检查点:

  1. 失效键匹配:写操作后需失效读取方实际订阅的确切 key/tag,否则列表或详情保持陈旧。TanStack 按前缀模糊匹配(['todos'] 可失效 ['todos',{page}]),除非 exact:true;RTK Query 需 providesTags 与 invalidatesTags 对齐(列表需 LIST id);Apollo 按 __typename:id 归一化缓存,新条目需更新列表字段或 refetch。
  2. 键设计:键须由稳定且可序列化的参数构成,对象属性顺序无关,数组顺序重要;不可序列化值或每次渲染新对象会造成永久缓存未命中,遗漏依赖参数会让不同结果冲突。
  3. 缓存分区:影响结果集选择的筛选、排序、搜索参数放入键;仅重新视图同一数据的参数不放。
  4. 瀑布与预取:避免串行 await;可提升结构、并行请求(useQueries/parallel)或在父级/路由预取。
  5. 时间与重验证:TanStack 默认 staleTime:0、gcTime 5 分钟、聚焦/重连重新获取为 true;SWR 默认聚焦与重连重验证并短期去重;RTK Query 需 setupListeners 加 refetchOnFocus/refetchOnReconnect 才重取,未用数据约 60 秒后丢弃。
  6. 分页/无限缓存:需追加而非覆盖;TanStack maxPages 配合 getNextPageParam 与 getPreviousPageParam 限制保留页数;SWR useSWRInfinite 累积页;Apollo 需字段策略 merge 配 keyArgs;RTK Query 用 serializeQueryArgs、merge、forceRefetch。
  7. Apollo fetchPolicy:cache-only/cache-first 可能使页面空或陈旧不重验证;cache-and-network/network-only 无降级 nextFetchPolicy 会每次渲染重取;变量变化时 nextFetchPolicy 重置。

用法与验证:可用 rg 搜索 useQuery、useInfiniteQuery、useSWR、createApi、queryKey、invalidateQueries、providesTags、staleTime、fetchPolicy、maxPages 等定位问题;机械性键问题可用 @tanstack/eslint-plugin-query 规则处理。修复后以测试或网络轨迹验证(写后读新、请求并行、追加加页数上限)。

限制:仅处理读取与缓存侧;写入回滚、实时传输、SSR 水合、无数据库的 effect 竞态属于同组其他技能。纯 staleTime/gcTime 调优无用户可见陈旧或可测成本时属配置偏好,不作为问题。具体安装命令与价格资料暂未提供。