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

【问题标题】：Handling unauthorized request in react-query在 react-query 中处理未经授权的请求
【发布时间】：2020-07-21 13:01:34
【问题描述】：

我在使用 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 的数据和错误对象。

【问题讨论】：

标签： reactjs react-query

【解决方案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()

【讨论】：

这应该是公认的答案。请参阅 react-query 文档 (react-query.tanstack.com/guides/…) 中的以下段落：对于 React Query 确定查询已出错，查询函数必须抛出。

【解决方案2】：

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

CodeSandbox Demo

【讨论】：

感谢您为我指明正确的方向。我添加了自己对处于我确切情况的人的回复，但将您的回复标记为正确，因为了解此问题最重要。
您能更新沙盒链接吗？链接不可用。
@SherlyFebrianti 感谢您指出这一点，我更新了代码框演示的链接

【解决方案3】：

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

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

【讨论】：