在反应查询中处理未经授权的请求

Question

我在使用反应查询时遇到问题。每当来自服务器的响应为未授权时，useQuery 将返回标志 status='success' 和 isError=false。服务器响应状态为401，json响应内容为{ error: true, message: 'UNAUTHORIZED' }。我没有以任何方式自定义 react-query。

我没有使用 ReactQueryConfigProvider，也没有在调用中传递任何选项来自定义行为。

这是电话：

const { status, data, error } = useQuery(
  ["hotelsList", { token: token }],
  getHotels
);

这是服务：

const getHotels = async ({ token }) => {
  const uri = process.env.REACT_APP_API_ENDPOINT_v2 + `/hotels`
  return (await fetch(uri, {
    method: "get",
    headers: {
      Authorization: "Bearer " + token,
      "Content-Type": "application/json"
    }
  })).json()
}

由于令牌无效，服务器正在响应 401 状态代码和我的自定义 json 响应。

这是来自 react-query 的数据和错误对象。

Answer 1

React-query 对你的 API 是不可知的，那个错误只应该改变当你的 API 没有响应时你会得到一个错误但是如果服务器响应 404或 401 等 react-query 不会关心，因为它是一个有效的响应，react-query 只是响应的网关，它在 useQuery 中不处理它，我在这里做了一个演示：你可以看到 URL 是错误的（指向 404）并且它返回 404 它不会影响错误值但是尝试将 API URL 更改为 github.x 例如，它将失败原因没有返回响应，错误值将改变

CodeSandbox Demo

Answer 2

为了扩展 Chamsddine 响应，我需要在获取响应不正常时抛出错误。这启用了 react-query 上的所有错误标志。

const response = await fetch(uri, {
  method: "get",
  headers: {
    Authorization: "Bearer " + token,
    "Content-Type": "application/json"
  }
})
if (!response.ok) throw new Error(response.statusText)
return await response.json()

Answer 3

None 的解决方案适用于 Typescript，我所做的是：

 const { isLoading, error, data } = useCampaign()
  let myCustomErrorLet: any = {}
  myCustomErrorLet.data = error
  console.log(myCustomErrorLet?.data?.response);

在反应查询中处理未经授权的请求

Handling unauthorized request in react-query

reactjs

react-query