reactjs - 使用@apollo/react-hooks，react 应用程序在刷新过期时会严重崩溃

Question

当我未登录时，我收到此错误：

Unhandled Rejection (Error): GraphQL error: Refresh has expired

它发生在这个代码块中：

  const { loading, error, data } = useQuery(GET_BILLABLE_EVENTS, {
    fetchPolicy: 'no-cache',
    errorPolicy: 'ignore',
    onError: (err) => {
      console.log({ err });
    },
  });
  return <div>hello</div>;

我真的希望它能够被优雅地处理，但它只会使 React 崩溃并抛出错误，尽管在选项中设置了错误策略和 onError。

当 create-react-app 重新启动时，它似乎陷入了这个错误循环。

Answer 1

您不能在到达 useQuery 之前检查用户是否经过身份验证吗？

我认为您应该能够通过将组件包裹在“错误边界”周围来优雅地处理它

来自反应文档

错误边界是 React 组件，它们在其子组件树的任何位置捕获 JavaScript 错误，记录这些错误，并显示一个备用 UI 而不是崩溃的组件树。错误边界在渲染期间、生命周期方法中以及它们下方的整个树的构造函数中捕获错误。

<ErrorBoundary>
  <App />
</ErrorBoundary>

错误边界示例