服务端分页场景下如何让FetchBaseQuery清除全部API缓存？

要解决刷新后所有分页缓存仍有效问题，核心是利用React Query的invalidateQueries方法批量失效所有与表格数据相关的缓存，同时修正状态更新的异步问题。

步骤1：引入并获取QueryClient实例 #

首先需要通过useQueryClient钩子获取QueryClient，用于操作缓存：

import { useQuery, useQueryClient } from '@tanstack/react-query';

// 组件内部
const queryClient = useQueryClient();

步骤2：优化useQuery的缓存键（推荐） #

将useQuery的缓存键改为数组形式，方便后续批量匹配所有分页缓存：

// 假设你的数据请求函数是fetchTableData
const { data, error, isFetching, refetch } = useQuery(
  ['tableData', request], // 数组键：前缀+请求参数，确保不同分页有独立缓存但属于同一组
  () => fetchTableData(request),
  { skip }
);

步骤3：修正刷新函数逻辑 #

修改refreshDetails函数，直接重置页码并批量失效所有表格缓存，同时避免异步状态更新的坑：

const refreshDetails = () => {
  // 直接设置目标页码，避免依赖异步更新的currentPageIndex
  const targetPage = 1;
  setCurrentPageIndex(targetPage);
  
  // 批量失效所有以['tableData']为前缀的缓存，即所有分页的数据
  queryClient.invalidateQueries({
    queryKey: ['tableData'],
    refetchType: 'active' // 可选：仅重新获取当前活跃的查询，这里刷新后第1页会自动重新请求
  });
};

额外优化：用useEffect同步页码与请求参数 #

为避免手动维护request与currentPageIndex的同步，可通过useEffect自动更新请求参数：

React.useEffect(() => {
  setRequest({
    test: true,
    index: currentPageIndex
  });
}, [currentPageIndex]);

这样刷新函数可以进一步简化，无需手动设置request：

const refreshDetails = () => {
  setCurrentPageIndex(1);
  queryClient.invalidateQueries({ queryKey: ['tableData'] });
};

为什么原来的方案无效？ #

• 原代码中refetch仅会重新请求当前request键对应的缓存，其他分页的缓存仍保留，导致后续点击分页时直接读取旧缓存。
• 同时存在异步状态更新问题：setCurrentPageIndex(1)是异步操作，执行setRequest时currentPageIndex还是旧值（比如10），会导致请求参数错误。

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