如何延迟RTK Query中失效缓存的重新请求？

你遇到的问题是：登出时通过invalidatesTags: ['AuthData']标记认证会话缓存失效，RTK Query会自动重新请求getAuthInfo接口，导致401错误。要阻止这种自动重取，只在主动调用时才发起请求，有两种可行方案：

方案1：修改查询的重取策略 #

在定义getAuthInfo查询时，配置三个重取相关参数为false，彻底禁用自动重取逻辑。即使缓存被标记失效，RTK Query也不会主动发起请求，只有当你手动调用refetch()方法，或者组件显式触发查询时才会请求数据。

代码示例：

const api = createApi({
  baseQuery: fetchBaseQuery({ baseUrl: '/api' }),
  endpoints: (builder) => ({
    getAuthInfo: builder.query({
      query: () => '/auth/info',
      providesTags: ['AuthData'],
      // 禁用挂载/参数变化时自动重取
      refetchOnMountOrArgChange: false,
      // 禁用网络重连时自动重取
      refetchOnReconnect: false,
      // 禁用页面重新聚焦时自动重取
      refetchOnFocus: false,
    }),
    login: builder.mutation({
      query: (credentials) => ({
        url: '/auth/login',
        method: 'POST',
        body: credentials,
      }),
      invalidatesTags: ['AuthData'],
    }),
    logout: builder.mutation({
      query: () => ({
        url: '/auth/logout',
        method: 'POST',
      }),
      invalidatesTags: ['AuthData'],
    }),
  }),
});

方案2：手动清除缓存替代invalidatesTags #

不在logout mutation中使用invalidatesTags，而是在onSuccess回调里手动清除目标缓存。这样既清空了旧的认证数据，又不会触发自动重取，下次主动调用getAuthInfo时才会重新请求。

代码示例：

const api = createApi({
  baseQuery: fetchBaseQuery({ baseUrl: '/api' }),
  endpoints: (builder) => ({
    getAuthInfo: builder.query({
      query: () => '/auth/info',
      providesTags: ['AuthData'],
    }),
    login: builder.mutation({
      query: (credentials) => ({
        url: '/auth/login',
        method: 'POST',
        body: credentials,
      }),
      invalidatesTags: ['AuthData'],
    }),
    logout: builder.mutation({
      query: () => ({
        url: '/auth/logout',
        method: 'POST',
      }),
      onSuccess: (_, __, { dispatch }) => {
        // 方式1：清空整个API的缓存（适合登出场景）
        dispatch(api.util.resetApiState());
        
        // 方式2：精准清除AuthData相关缓存（如果不需要清空全部）
        // dispatch(api.util.invalidateTags([{ type: 'AuthData', id: 'LIST' }]));
        // 注：未指定id的查询默认用'LIST'作为标识
      },
    }),
  }),
});

如果你的应用中还有其他用户相关缓存，resetApiState是更省心的选择；如果只想清除认证数据，用精准的invalidateTags方式即可。

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