Apollo 订阅 - 使用 subscribeToMore 处理 WS 断开连接

Question

我一直在寻找一种方法来处理我的带有 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 或 Subscription Apollo 组件中是否有方法能够捕获此事件并从组件中相应地处理它？

Answer 1

我能想到几种方法来处理这些案件，但都不是一劳永逸的解决方案，每个案件都需要独立处理。

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

Answer 2

您可以使用来自subscriptions-transport-ws 的SubscriptionClient 回调，如下所示：

const ws = require("ws");
const { SubscriptionClient } = require("subscriptions-transport-ws");
const { WebSocketLink } = require("apollo-link-ws");
const { ApolloClient } = require("apollo-client");
const { InMemoryCache } = require("apollo-cache-inmemory");

const subClient = new SubscriptionClient(
    'ws://localhost:4000/graphql',
    { reconnect: true },
    ws
);

subClient.onConnected(() => { console.log("onConnected") });
subClient.onReconnected(() => { console.log("onReconnected") });
subClient.onReconnecting(() => { console.log("onReconnecting") });
subClient.onDisconnected(() => { console.log("onDisconnected") });
subClient.onError(error => { console.log("onError", error.message) });

const wsLink = new WebSocketLink(subClient);

const client = new ApolloClient({
    link: wsLink,
    cache: new InMemoryCache()
});

我将它用于 Node.js，但它可能也适用于 React。