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

IT技术 reactjs react-query
2021-04-28 18:42:53

我在使用 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 响应进行响应。

来自服务器的响应代码是 401

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

useQuery 返回的对象

3个回答

为了扩展 Chamsddine 响应，我需要在 fetch 响应不正常时抛出一个错误。这启用了 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 对您的 API 不可知，该错误只应该更改 当您的 API 没有响应时，您将收到错误但如果服务器以 404 或 401 等响应，则 react-query 不会在意，因为它是一个有效的响应，react-query 只是它在 useQuery 中不处理它的响应的网关，我在这里做了一个演示：你可以看到 URL 是错误的（指向 404）并且它返回 404 它不会' t影响错误值但尝试将API URL更改为github.x，例如，它会失败，因为没有返回任何响应并且错误值会改变

代码沙盒演示

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

 const { isLoading, error, data } = useCampaign()
  let myCustomErrorLet: any = {}
  myCustomErrorLet.data = error
  console.log(myCustomErrorLet?.data?.response);
其它你可能感兴趣的问题
上一篇更改 Navigator.NavigationBar（标题）的默认样式 下一篇如何将 React 组件的 props 传递给样式化组件