React Query：如何失效所有useInfiniteQuery缓存数据？

你的问题核心在于两点：

1. 查询键未关联查询参数：当前queryKey仅为固定的["program-categories"]，但实际查询依赖params中的参数（如perPage），导致不同参数组合的缓存无法被正确识别和批量失效。
2. 缓存失效配置未覆盖无限查询场景：默认的invalidateQueries调用没有明确匹配所有相关缓存条目，也未触发主动重新获取逻辑。

1. 优化查询键，绑定所有影响查询的参数 #

修改useGetInfiniteProgramCategoriesQuery的queryKey，将params的序列化值加入其中，确保不同参数组合的查询都能被唯一标识，同时支持通过前缀匹配批量失效：

export const useGetInfiniteProgramCategoriesQuery = ({
   params,
}: UseGetInfiniteProgramCategoriesQuery) => {
   // 将URLSearchParams转为对象，作为queryKey的一部分
   const queryParams = Object.fromEntries(params);
   
   return useInfiniteQuery({
      // 加入参数到queryKey，保证缓存唯一性
      queryKey: ["program-categories", queryParams],
      queryFn: async ({ pageParam }) => {
         params.set("cursor", pageParam.toString());
         const res = await api.get("/program-categories", { params });
         const [data, count] = res.data?.data;
         return {
            data,
            hasNextPage: pageParam * +params.get("perPage")! < count,
            cursor: pageParam,
         };
      },
      initialPageParam: 1,
      getNextPageParam: (lastPage) =>
         lastPage.hasNextPage ? lastPage.cursor + 1 : null,
      select: (data) => data.pages.flatMap((page) => page.data),
   });
};

2. 调整缓存失效配置，覆盖所有相关查询 #

修改invalidateQueries调用，添加exact: false（匹配所有以["program-categories"]为前缀的缓存）和refetchType: 'active'（触发当前活跃查询的立即重新获取）：

queryClient.invalidateQueries({
   queryKey: ["program-categories"],
   exact: false, // 匹配该前缀下的所有缓存条目
   refetchType: 'active', // 让页面中活跃的查询立即重新获取数据
});

3. 可选：处理长缓存时效场景 #

如果你的useInfiniteQuery设置了较长的staleTime，可以添加force: true强制刷新所有匹配的缓存：

queryClient.invalidateQueries({
   queryKey: ["program-categories"],
   exact: false,
   refetchType: 'all',
   force: true, // 强制刷新所有关联缓存
});

原理说明 #

• 绑定参数到queryKey后，不同参数的查询会生成独立缓存条目，但通过前缀匹配可以一次性失效所有相关缓存。
• refetchType: 'active'会触发当前页面的useInfiniteQuery自动重新请求数据，无需手动刷新页面即可看到变更。

内容的提问来源于stack exchange，提问作者alas.code