Redux RTK Query执行mutation后invalidatesTags未触发问题排查

问题排查步骤 #

• 第一步先确认login mutation是否真的触发并完成请求
  先在浏览器网络面板检查auth/login的POST请求是否正常发出、有没有拿到响应。如果请求跨域被拦截、参数错误返回4xx/服务端错误返回5xx，且你没有做错误处理，会看起来逻辑没执行。你可以在调用login的位置加日志，同时给login调用加unwrap处理捕获错误：

  useEffect(() => {
    if (isUninitialized) {
      console.log('触发login请求')
      login(getCode(location))
        .unwrap()
        .then(res => console.log('login请求成功', res))
        .catch(err => console.error('login请求失败', err))
    }
  // 必须补全依赖数组，避免闭包问题导致参数错误
  }, [isUninitialized, location, login])
  

• 第二步修复useEffect的依赖缺失问题
  你当前的useEffect没有传入第二个依赖数组，会在组件每次渲染时重复执行，极容易出现闭包陷阱导致getCode(location)拿到的授权码错误，请求直接失败。
• 第三步简化invalidatesTags配置排除函数写法问题
  先把login的invalidatesTags改成静态配置，排除函数参数问题导致的逻辑不执行：

  login: build.mutation({
    query: code => ({
      url: `auth/login/?code=${code}`,
      method: 'POST',
    }),
    // 先改成静态标签，测试是否触发
    invalidatesTags: ['User'],
  }),
  

• 第四步确认login成功后是否更新了授权状态
  就算invalidatesTags触发成功，如果你没有把login接口返回的token存入auth slice，isAuthenticated始终为false，getMe的skip条件一直生效，也不会触发重取，但这个情况不影响invalidatesTags本身的日志打印，如果你是没有看到重取请求而不是没看到invalidatesTags的日志，优先排查这一点：你需要在login成功后手动dispatch更新auth状态的token：

  login(getCode(location))
    .unwrap()
    .then(res => {
      // 假设你auth slice有setToken的action
      dispatch(setToken(res.token))
      // 再执行跳转逻辑
    })
  

• 第五步排查组件提前卸载的问题
  如果你在login请求还没完成的时候就跳转页面卸载了CallbackComponent，可能会导致mutation的后续逻辑被中断。用上面的unwrap处理异步逻辑，跳转放在请求完成之后即可解决。

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