使用TanStack React Query的useInfiniteQuery，如何针对特定页面执行invalidateQuery？

使用useInfiniteQuery时，直接按基础查询键执行invalidateQueries会刷新所有分页数据，引发不必要的API请求。要只失效特定页面，需要精准匹配对应分页的缓存条目，避免全量刷新。

实现思路 #

useInfiniteQuery会为每个分页参数（pageParam）维护独立的缓存，这些缓存条目共享同一个基础查询键，但会标记对应的pageParam。我们可以通过invalidateQueries的predicate筛选函数，只对目标pageParam的缓存执行失效操作。

适配你的代码 #

1. 确定目标页面的pageParam

根据你的分页逻辑，找到要失效页面对应的pageParam值（比如第一页是0，后续页面的参数由getNextPageParam返回的offset_决定）。

2. 修改失效逻辑

将原来的全量失效改为精准匹配：

useEffect(() => {
  if (isTimelineLoaded) {
    // 替换为你要失效的目标页面参数，示例中为第一页的pageParam
    const targetPageParam = 0;

    queryClient.invalidateQueries({
      // 保留原基础查询键，确保匹配到对应的无限查询缓存
      queryKey: [
        `timeline-${entity_id}-${recordId}-${timelineViewId}`,
        entity_id.toString(),
        recordId.toString(),
        timelineViewId.toString(),
        JSON.stringify(filterData),
        currentEntity?.entity_uuid &&
          selectedView?.timeline?.[currentEntity?.entity_uuid]?.searchText,
      ],
      // 筛选出仅匹配目标pageParam的缓存条目
      predicate: (query) => {
        // 查询的state中会携带对应的pageParam
        return query.state?.pageParam === targetPageParam;
      },
    });
  }
}, [isTimelineLoaded, queryClient, entity_id, recordId, timelineViewId, filterData, currentEntity, selectedView]);

扩展场景 #

• 若需要失效多个页面，可在predicate中添加多条件判断，比如：

  predicate: (query) => {
    // 失效pageParam为0或10的页面
    return [0, 10].includes(query.state?.pageParam);
  }
  

• 如果你的分页参数是自定义的唯一标识符，只需将targetPageParam替换为对应的值即可。

内容的提问来源于stack exchange，提问作者Manthan_