首页 > 解决方案 > Apollo 订阅 - 使用 subscribeToMore 处理 WS 断开连接

问题描述

我一直在寻找一种通过 Apollo 订阅在我的 React 应用程序中处理 Web 套接字断开连接的方法,但还没有找到这样做的方法。我在 apollo 文档中看到的其他示例显示了以下捕获重新连接的方法:

  const wsClient = process.browser ? new SubscriptionClient(WSendpoint, {
    reconnect: true,
  }) : null;

  const wsLink = process.browser ? new WebSocketLink(wsClient) : null;

  if (process.browser) {
    wsLink.subscriptionClient.on(
      'reconnected',
      () => {
        console.log('reconnected')
      },
    )
  }

上述方法有两个问题:

  1. 是不是当用户与他们的互联网断开连接时(仅当服务器因任何原因重新启动时)
  2. 重新连接是在我的 React 应用程序组件之外触发的。

如果用户断开与互联网的连接或我的快速服务器因任何原因出现故障,我想做的是重新加载我的“聊天”组件。为此,我需要我的聊天组件完全重新加载,我不确定是否可以从我的组件树外部。

Query或Apollo 组件中是否有方法Subscription能够捕获此事件并从组件中相应地处理它?

标签: javascriptwebsocketgraphqlapollo

解决方案


我可以想到几种方法来处理这些案例,但它们都不是一劳永逸的解决方案,每个案例都需要独立处理。

  1. 设置一个online/offline监听器(ref
  2. 设置一个Apollo middleware来处理来自您的服务器的网络错误(参考
  3. isOnline例如,在您的商店中创建一个变量,该变量可以保存您应用程序状态的全局引用。每当上述两种方法触发时,您都可以更新isOnline
  4. 最后,将所有这些捆绑在一起。创建一个React HOC,用于isOnline处理每个组件的网络状态。这可用于处理网络错误消息,在网络恢复后刷新组件。

推荐阅读