React中RTK Query无限滚动：切换分类时缓存未重置问题排查

场景与需求 #

有「全部」「手机」「笔记本」三个分类按钮，点击按钮加载对应分类列表，同时实现滚动加载下一页；切换分类时需要重置缓存并加载新分类的第一页数据。

现有代码 #

组件内状态与查询逻辑 #

const [currentPage, setCurrentPage] = useState(1);
const [category, setCategory] = useState('all');

const {
  data,
  isLoading,
  isFetching,
  error
} = useCategorySearchAPIQuery(
  {groupBy: category, page: currentPage},
  {refetchOnMountOrArgChange: true},
);

RTK Query的Query配置 #

categorySearchAPI: builder.query({
  query: ({groupBy, page}) => ({
    url: `${CATEGORY_ENDPOINT}/all?group_by=${groupBy}&page=${page}`,
  }),
  transformResponse: (response, meta, arg) => {
    return response.data;
  },
  serializeQueryArgs: ({endpointName}) => {
    return endpointName;
  },
  // 合并新数据到缓存
  merge: (currentCache, newItems) => {
    currentCache.push(...newItems);
  },
  // 参数变化时重新请求
  forceRefetch({currentArg, previousArg}) {
    return currentArg !== previousArg;
  },
}),

当前问题 #

切换分类时，不同分类的数据混杂在一起，缓存未自动重置。

问题原因分析 #

1. 缓存键未区分分类：serializeQueryArgs只返回了endpointName，导致所有分类的查询结果都存在同一个缓存条目里。切换分类后，新请求的分类数据会通过merge方法追加到旧分类的缓存中，造成数据混杂。
2. 切换分类时页码未重置：切换分类后currentPage仍保留之前的数值，会直接请求新分类的对应页码数据，而非第一页；同时因为缓存共用，旧数据也不会被清除。

解决方案 #

1. 为每个分类生成独立缓存键 #

修改serializeQueryArgs，将分类参数groupBy加入缓存键，确保不同分类的缓存完全隔离：

serializeQueryArgs: ({ endpointName, queryArgs }) => {
  // 用endpointName + groupBy作为唯一缓存键
  return `${endpointName}-${queryArgs.groupBy}`;
}

2. 切换分类时重置页码 #

在分类按钮的点击事件中，切换分类的同时将currentPage重置为1，确保加载新分类的第一页数据：

const handleSwitchCategory = (newCategory) => {
  setCategory(newCategory);
  setCurrentPage(1);
};

3. 保留原有分页追加逻辑 #

merge方法的作用是同一分类下分页加载时，将新页数据追加到现有缓存中，这个逻辑是正确的。现在每个分类有独立缓存，切换分类后不会再合并其他分类的数据。

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