RTK Query如何全局失效所有缓存并为活跃订阅者自动重取

RTK Query 完全可以实现和react-admin useRefresh、react-query全局invalidateQueries一致的效果：失效所有查询缓存、为活跃订阅的查询自动触发重取，不需要逐个枚举每个API的标签手动调用。

核心原理 #

RTK Query的invalidateTags方法内置通配符匹配能力，传入{ type: '*', id: '*' }作为标签参数时，会匹配当前API实例下的所有缓存条目，将其标记为过期状态：

• 对当前被组件订阅（活跃）的查询，会立刻自动触发重取，拉取最新数据
• 对未被订阅的缓存，不会直接删除，仅标记为过期，下次组件挂载使用时会在后台自动重取，不会触发首次加载的硬Loading状态，体验更流畅

具体实现 #

场景1：单API实例（绝大多数项目的常规用法） #

如果你的项目所有接口都基于同一个createApi实例创建（多模块通过injectEndpoints扩展端点），实现非常简单：

import { useDispatch } from 'react-redux'
// 导入你项目中全局初始化的baseApi实例
import { baseApi } from '@/services/base-api'

export const useRefresh = () => {
  const dispatch = useDispatch()

  return () => {
    // 通配符匹配所有缓存，触发全局失效重取
    dispatch(baseApi.util.invalidateTags([{ type: '*', id: '*' }]))
  }
}

场景2：多独立API实例 #

如果你的项目拆分了多个独立的createApi实例（比如对接多个不同域名的服务），可以统一收集所有API实例后批量触发失效：

1. 先写一个自动收集API实例的工具方法，避免手动维护列表：

   // src/services/api-tracker.js
   const apiSet = new Set()
   
   // 创建API时用该方法包裹，自动完成收集
   export const trackApi = (apiInstance) => {
     apiSet.add(apiInstance)
     return apiInstance
   }
   
   // 获取所有已注册的API实例
   export const getAllApis = () => Array.from(apiSet)
   

2. 每个创建API的地方都用trackApi包裹：

   import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
   import { trackApi } from './api-tracker'
   
   export const userApi = trackApi(createApi({
     reducerPath: 'userApi',
     baseQuery: fetchBaseQuery({ baseUrl: '/api/user' }),
     endpoints: () => ({})
   }))
   

3. 实现全局useRefresh：

   import { useDispatch } from 'react-redux'
   import { getAllApis } from '@/services/api-tracker'
   
   export function useRefresh() {
     const dispatch = useDispatch()
   
     return () => {
       getAllApis().forEach(api => {
         dispatch(api.util.invalidateTags([{ type: '*', id: '*' }]))
       })
     }
   }
   

注意事项 #

不要用dispatch(api.util.resetApiState())实现全局刷新逻辑：该方法会直接清空API实例下的所有缓存、订阅状态，未被组件挂载的缓存会被直接移除，下次使用时会走首次加载的硬Loading流程，和缓存失效后软重取的交互体验不一致。

该实现的效果和需求完全对齐：调用refresh方法后，当前页面所有正在展示的RTK Query查询都会自动拉取最新数据，不需要手动给每个接口打标签、逐个调用失效方法。

内容的提问来源于stack exchange，提问作者Vinícius Neto