reactjs - 在 react-query 中处理未经授权的请求

Question

我在使用 react-query 时遇到问题。只要来自服务器的响应未经授权，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

为了扩展 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 2

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

CodeSandbox 演示

Answer 3

没有一个解决方案适用于 Typescript，我所做的是：

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