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

Posted

技术标签:

【中文标题】使用@apollo/react-hooks,react 应用程序在刷新过期时严重崩溃【英文标题】:Using @apollo/react-hooks, the react app crashes hard on refresh being expired 【发布时间】:2020-09-22 16:37:59 【问题描述】:

当我未登录时,我收到此错误:

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 时,似乎卡在了这个错误循环中。

【问题讨论】:

【参考方案1】:

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

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

From react documentation

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

<ErrorBoundary>
  <App />
</ErrorBoundary>

ErrorBoundary Example

【讨论】:

以上是关于使用@apollo/react-hooks,react 应用程序在刷新过期时严重崩溃的主要内容,如果未能解决你的问题,请参考以下文章

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

有没有办法使用 @apollo/react-hooks 访问多个 graphql 突变的选项

在@apollo/react-hooks 的 useQuery 钩子中忽略了跳过参数

如何转换从@apollo/react-hooks 接收到的数据

如何在单个项目中使用多个版本的 Apollo 客户端

apollo graphql 突变 - JSON 输入意外结束