RTK Query：如何使用不同参数失效标签缓存？

嘿，我完全懂你的困扰——用RTK Query做无限滚动时，跨页面失效缓存并重置到第一页确实容易踩坑。咱们一步步拆解问题，看看怎么解决：

首先，你遇到的核心问题是：当你用invalidatesTags时，RTK Query默认会基于最后一次发起查询的参数来重新获取数据，但你希望它用重置后的page=0参数来拉取第一页，彻底清空之前合并的多页数据。

为什么会出现这个问题？ #

你的无限滚动是靠merge把新页面的条目追加到缓存里，而且每个分页请求的参数（page/offset）会生成独立的缓存标识，但当你跨页面触发失效时，列表组件的分页状态可能还没同步更新，或者RTK Query还没感知到参数变化，就用旧参数重新请求了。

解决方案一：同步分页状态 + 标签失效（推荐） #

这是最符合RTK Query设计理念的方式：

1. 把分页状态存到全局Store：别用组件本地的useState存当前页码，改用Redux全局状态（比如用createSlice创建一个分页状态slice）。这样在其他页面的mutation成功后，能直接重置全局的页码为0。
2. 让查询依赖全局分页状态：列表组件里用useSelector获取全局的currentPage，并把它作为useGetItemsQuery的参数。这样当页码重置为0时，查询会自动触发新的请求，参数就是page=0。
3. 给查询和mutation配置对应标签：
   • 在你的getItems查询里，加上providesTags: ['Items']
   • 在mutation里，配置invalidatesTags: ['Items']

代码示例大概是这样：

// 全局分页状态slice
const paginationSlice = createSlice({
  name: 'pagination',
  initialState: { currentPage: 0 },
  reducers: {
    setCurrentPage: (state, action) => {
      state.currentPage = action.payload;
    },
    resetPage: (state) => {
      state.currentPage = 0;
    },
  },
});

// 查询定义
const api = createApi({
  baseQuery: fetchBaseQuery({ baseUrl: '/api' }),
  endpoints: (builder) => ({
    getItems: builder.query({
      query: ({ page }) => `/items?offset=${page * 20}`,
      merge: (current, next) => [...current, ...next],
      forceRefetch: ({ currentArg, previousArg }) => currentArg.page !== previousArg.page,
      providesTags: ['Items'],
    }),
    updateItem: builder.mutation({
      query: (item) => ({
        url: `/items/${item.id}`,
        method: 'PUT',
        body: item,
      }),
      invalidatesTags: ['Items'],
      onSuccess: () => {
        // 重置全局页码到0
        dispatch(paginationSlice.actions.resetPage());
      },
    }),
  }),
});

// 列表组件里的使用
const ListScreen = () => {
  const currentPage = useSelector(state => state.pagination.currentPage);
  const { data, fetchNextPage, hasNextPage } = useGetItemsQuery({ page: currentPage });

  // 滚动到底部触发fetchNextPage，同时更新全局页码
  const handleLoadMore = () => {
    if (hasNextPage) {
      fetchNextPage();
      dispatch(paginationSlice.actions.setCurrentPage(currentPage + 1));
    }
  };

  // ...渲染列表的逻辑
};

这样做的好处是：mutation成功后，先重置全局页码，再通过invalidatesTags标记所有Items标签的缓存失效，列表组件感知到页码变化后，自动用page=0发起新请求，因为缓存已经失效，会拉取最新的第一页数据，彻底替换之前合并的多页内容。

解决方案二：手动发起指定参数的查询 #

如果全局状态的方式不太适配你的项目，也可以在mutation的onSuccess里手动触发page=0的查询，强制刷新缓存：

const mutation = useUpdateItemMutation({
  onSuccess: () => {
    // 重置组件本地的页码（如果用的是useState）
    setCurrentPage(0);
    // 手动失效标签
    dispatch(api.util.invalidateTags(['Items']));
    // 强制发起page=0的查询，覆盖缓存
    dispatch(api.endpoints.getItems.initiate({ page: 0 }, { forceRefetch: true }));
  },
});

这里的forceRefetch: true会确保RTK Query忽略现有缓存，重新拉取第一页的数据，直接替换掉之前合并的内容。

小提醒 #

• 别忘记给每个分页请求的查询参数（page/offset）加上唯一标识，这样RTK Query能区分不同页码的缓存条目。
• 如果你的merge逻辑是把多页数据合并到同一个缓存条目里，那失效后重新请求page=0会自动覆盖这个条目，不会保留之前的合并数据。

备注：内容来源于stack exchange，提问作者abdou-tech