如何在查询数据后清除RTK Query缓存？

核心思路 #

当非RTK Query的搜索操作改变后端数据状态后，需主动清除对应RTK Query的缓存，确保下次用相同参数查询时能重新发起请求获取最新结果。

具体实现方法 #

1. 用invalidateTags清除指定缓存标签 #

定义API切片时，给目标查询端点设置providesTags，在非RTK Query操作完成后，调用dispatch清除对应标签的缓存。

示例代码：

// 定义API切片
const apiSlice = createApi({
  reducerPath: 'api',
  baseQuery: fetchBaseQuery({ baseUrl: '/' }),
  endpoints: (builder) => ({
    searchWithRTK: builder.query({
      query: (params) => `/search?${new URLSearchParams(params)}`,
      providesTags: ['SearchResults'] // 设置缓存标签
    })
  })
})

// 非RTK Query操作完成后清除缓存
const handleNonRTKSearch = async (params) => {
  // 执行非RTK的搜索请求
  await fetch(`/non-rtk-search?${new URLSearchParams(params)}`);
  // 清除对应缓存标签
  dispatch(apiSlice.util.invalidateTags(['SearchResults']));
}

2. 用invalidateEndpoint清除整个端点缓存 #

若无需按标签细分，可直接清除目标查询端点的所有缓存：

dispatch(apiSlice.util.invalidateEndpoint('searchWithRTK'));

3. 手动移除特定缓存条目 #

如需精准清除某组参数对应的缓存，可通过updateQueryData移除指定条目：

// 移除特定参数的缓存
dispatch(apiSlice.util.updateQueryData('searchWithRTK', targetParams, () => {
  return undefined; // 返回undefined会移除该缓存条目
}))

4. 配置自动缓存失效策略 #

在查询端点定义中设置keepUnusedDataFor，让缓存自动失效（适合实时性要求不高的场景）：

searchWithRTK: builder.query({
  query: (params) => `/search?${new URLSearchParams(params)}`,
  keepUnusedDataFor: 10 // 缓存10秒后自动失效
})

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