如何仅在特定RTK Query调用时使无限滚动查询缓存失效？

1. 先修正基础缓存逻辑（解决参数变化时的数据混乱问题） #

你当前的serializeQueryArgs把所有请求映射到同一个缓存键，会导致分类（filter）变化时，新数据依然追加到旧缓存中，不符合预期。需要让不同filter对应独立缓存，同时保持同一filter下的分页数据合并：

getArticles: builder.query({
  query: (args) => {
      let { page, filter } = args;
      let filtersString = filter.join(',');
      // 修正模板字符串语法错误：用反引号包裹才能解析变量
      return {
          url: `/apiPath?offset=${page*5}&limit=1000&categories=${filtersString}`
      }
  },

  // 用 endpointName + filter 生成缓存键，确保不同分类的缓存独立
  serializeQueryArgs: ({ endpointName, queryArgs }) => {
      return `${endpointName}-${queryArgs.filter.join(',')}`;
  },

  merge: (currentCache, newItems) => {
      currentCache.push(...newItems)
  },

  // 分类或页码变化时，触发重新请求
  forceRefetch({ currentArg, previousArg }) {
      return currentArg.filter.join(',') !== previousArg.filter.join(',') 
          || currentArg.page !== previousArg.page;
  },
})

2. 实现强制清空缓存从头查询 #

推荐两种常用方案：

方案一：使用标签失效（符合RTK Query设计规范） #

给查询添加标签标识，在需要强制刷新时调用invalidateTags清空对应缓存：

步骤1：修改查询定义，添加标签

getArticles: builder.query({
  // ... 保留上述query、serializeQueryArgs、merge、forceRefetch逻辑

  // 添加标签，用于后续精准失效缓存
  providesTags: (result, error, args) => {
    return [{ type: 'Articles', id: args.filter.join(',') }];
  }
})

步骤2：在需要强制刷新的场景调用失效方法

import { useInvalidateQueries } from '@reduxjs/toolkit/query/react';

// 组件内使用
const invalidateQueries = useInvalidateQueries();

const handleForceRefresh = () => {
  // 替换成当前实际使用的filter值
  const currentFilter = ['tech'];
  // 失效当前分类的文章缓存，也可直接传入['Articles']失效所有文章缓存
  invalidateQueries({
    type: 'Articles',
    id: currentFilter.join(',')
  });
  // 后续重新触发查询时，会从头加载page=0的数据
};

方案二：添加刷新标识参数 #

通过新增refreshToken参数触发全新查询，生成新缓存替换旧数据：

步骤1：修改查询定义

getArticles: builder.query({
  query: (args) => {
      let { page, filter, refreshToken } = args;
      let filtersString = filter.join(',');
      return {
          url: `/apiPath?offset=${page*5}&limit=1000&categories=${filtersString}`
      }
  },

  // 把refreshToken加入缓存键，不同token对应新缓存
  serializeQueryArgs: ({ endpointName, queryArgs }) => {
      return `${endpointName}-${queryArgs.filter.join(',')}-${queryArgs.refreshToken}`;
  },

  // 刷新标识变化时，直接替换缓存而非追加
  merge: (currentCache, newItems, { args }) => {
    if (args.page === 0 || args.refreshToken !== args.previousRefreshToken) {
      return newItems;
    }
    currentCache.push(...newItems);
  },

  forceRefetch({ currentArg, previousArg }) {
      return currentArg.filter.join(',') !== previousArg.filter.join(',') 
          || currentArg.page !== previousArg.page
          || currentArg.refreshToken !== previousArg.refreshToken;
  },
})

步骤2：在组件中使用刷新标识

import { useState } from 'react';
import { useGetArticlesQuery } from './yourApiSlice';

const ArticlesList = () => {
  const [refreshToken, setRefreshToken] = useState(Date.now());

  const { data, fetchNextPage } = useGetArticlesQuery({
    page: 0,
    filter: ['tech'],
    refreshToken
  });

  // 强制刷新时更新token，触发全新查询
  const handleForceRefresh = () => {
    setRefreshToken(Date.now());
  };

  return (
    <div>
      <button onClick={handleForceRefresh}>强制刷新</button>
      {/* 渲染文章列表和加载更多按钮 */}
    </div>
  );
};

总结 #

• 优先选择标签失效方案，逻辑更清晰，符合RTK Query的设计理念。
• 修正serializeQueryArgs后，不同分类的缓存会独立存储，避免数据混乱；分页参数变化时自动追加数据，分类变化时自动重新获取。
• 强制刷新时，通过标签失效或刷新标识参数，可实现清空缓存从头加载的需求。

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