React Query 在全局 onError 处理程序中获取错误状态代码

Question

创建 queryClient 时，我想创建一个全局 onError 处理程序，用于在错误响应代码为 401 时刷新我的访问令牌。但我不知道如何访问状态代码关于 onError 处理程序中返回的错误。

下面是我的全局 onError 处理程序，我只需要访问 if 语句中的响应代码以在适当的时间刷新我的令牌。

const queryClient = new QueryClient({
  queryCache: new QueryCache({
    onError: async (error, query) => {
      // How to get status code fo error
      if (error.status === 401) {
        console.log("Refreshing Token");
        await api.get("/api/refresh-token");
        queryClient.refetchQueries(query.queryKey);
      }
    },
  }),
});

Answer 1

您应该使用 error.request.status 来获取它。

const queryClient = new QueryClient({
  queryCache: new QueryCache({
    onError: async (error, query) => {
      // How to get status code fo error
      if (error.request.status === 401) {
        console.log("Refreshing Token");
        await api.get("/api/refresh-token");
        queryClient.refetchQueries(query.queryKey);
      }
    },
  }),
});

Answer 2

错误就是被拒绝的 Promise 创建的任何内容，因此这取决于您如何进行实际数据获取。

如果是 axios，它可能是一个 AxiosError，因此状态代码应该在那里可用。

如果是 fetch，那么这取决于您如何将错误的状态代码转换为失败的 Promise，因为默认情况下 fetch 不会这样做。如果只是：

if (!response.ok) {
  throw new Error("no ok")
}

那么你根本没有关于状态码的信息，因为你没有将它包含在错误中。

总而言之，这不在反应查询的范围内，因为它不知道如何完成数据获取。

Answer 3

错误类型为“未知”，您需要映射此类型。我正在使用 fetch 来执行请求，并且可以将错误映射为“响应”对象。如果需要查阅de错误的内容，可以打印JSON.stringfy.

  queryCache: new QueryCache({
onError: (error) => {
  // JSON.stringify(error) if you are not secure and need to see the content, could print the error in strinfy
  const response = error as Response
  console.log('---------------------------------')
  console.log(response.status) // 401
  console.log(response.type) // default
  console.log(response.ok) // false
  console.log('---------------------------------')
}})

React Query 在全局 onError 处理程序中获取错误状态代码

React Query get error status code in global onError handler

reactjs

axios

react-query