react-query 遇到 401 时尝试刷新令牌并使查询无效

Question

我想围绕 react-query 的 useQuery 钩子创建一个包装器钩子，以便捕获 401 错误，尝试刷新访问令牌，如果成功刷新 - 使原始查询无效。

我正在尝试做的完整示例在这里：https://codesandbox.io/s/agitated-booth-hbe12?file=/src/App.js

function useMyQUery() {
  const queryClient = useQueryClient();
  const { tryRefreshToken } = useSession();

  const query = useQuery(...arguments);

  if (query.isError && query.error?.status === 401) {
    tryRefreshToken().then((tokenRefreshSucccessful) =>
      queryClient.invalidateQueries("todos")
    );
  } else {
    return query;
  }

  return {};
}

在我上面链接的示例中，我能够捕捉到错误，触发函数tryRefetchToken，但useSession 钩子内的函数似乎在设置后不会拾取令牌。

Answer 1

我认为你不能直接在渲染函数中触发像 tryRefreshToken() 或 queryClient.invalidateQueries 这样的副作用。尝试将这些副作用放入useQuery 的onError 回调或useEffect。比如：

function useMyQUery() {
  const queryClient = useQueryClient()
  const { tryRefreshToken } = useSession()

  return useQuery(key, fn, {
    onError: (error) => {
      if (error.status === 401) {
        tryRefreshToken().then((tokenRefreshSucccessful) =>
          queryClient.invalidateQueries("todos")
        )
      }
    }
  })
}