Apollo订阅-处理Web与SubscribeToMore断开连接

Question

我一直在寻找一种方法来处理带有Apollo订阅的React应用程序中的Web套接字断开连接，但没有找到一种方法。我在阿波罗文档中看到的其他示例显示了以下捕获重新连接的方法：

  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或SubscriptionApollo组件中是否有一种方法可以捕获此事件并从组件中进行相应处理？

Answer 1

我可以想到几种方法来处理这些情况，但它们都不是一次性解决方案，每种情况都需要独立处理。

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