当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尝试将这些副作用放入或 的onError回调中。就像是：useQueryuseEffect

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

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