如何关闭陈旧的 Apollo-Client websocket 连接？答案

【问题标题】：How do you shut down a stale Apollo-Client websocket connection?如何关闭陈旧的 Apollo-Client websocket 连接？
【发布时间】：2022-03-09 07:59:37
【问题描述】：

我有一个页面正在加载连接的 apollo 客户端页面作为主页内的小部件。我的 GraphQL 服务器是自托管的。它们通过 iFrame（自托管）提供，连接回我自己的服务器。通信是通过第 3 方的 iFrame 通信 SDK 完成的。

由于某些原因，小部件在陈旧时不会从窗口中清除（我无法控制）。但是，我确实可以知道它们何时“过时”。当它们变得陈旧时，我想断开/关闭 websocket 连接。问题是仍然连接的客户端正在吃掉我后端的 CPU。我正在通过 chrome dev-tools 观看 websocket 连接。我注意到它每 5 秒向 websocket 服务器发送一个保持活动的请求。每隔一段时间我就会看到一个停止请求，我想弄清楚如何复制它。

我是我的 react apollo-connected 组件，我尝试调用这两个命令，但是在没有错误地调用它们之后，keep-alive 标志仍在发送到 websocket 服务器。

this.props.client.stop()
this.props.client.clearStore();

如何告诉 apollo-client 自行关闭？

【问题讨论】：

你找到解决方法了吗？
你找到解决方法了吗？

标签： apollo-client

【解决方案1】：

对于 Apollo V3，WebSocketLink 有一个内部 SubscriptionClient 实例，但问题是 WebSocketLink 没有公开允许您访问 SubscriptionClient 实例的方法，因此无法访问 SubscriptionClient.close()。幸运的是，WebSocketLink 接受客户端作为参数：

const subscriptionClient = new SubscriptionClient(`wss://example.com/subscriptions`, {
  // example options:
  reconnect: true,
  lazy: true,
  connectionParams: () => ({ accessToken: 'secret' }),
});

const wsLink = new WebSocketLink(subscriptionClient);

现在您只需将 subscriptionClient 移动到一个上下文中，以便在各个地方访问客户端：

export const SubscriptionClientContext = createContext<
  SubscriptionClient | undefined
>(undefined);
export const useSubscriptionClient = (): SubscriptionClient => {
  const subscriptionClient = useContext(SubscriptionClientContext);
  if (subscriptionClient === undefined) {
    throw Error(
      'SubscriptionClient not initiated, can only be called inside SubscriptionClientContext.Provider',
    );
  }
  return subscriptionClient;
};

<SubscriptionClientContext.Provider value={subscriptionClient}>
  <App />
</SubscriptionClientContext.Provider>

这将允许您访问客户端上的方法以在应用程序的各个部分进行注销行为：

const subscriptionClient = useSubscriptionClient();

subscriptionClient.close();

.close 也有两个参数，它们具有不同的行为。例如。关闭并重新连接，关闭而不重新连接。

【讨论】：