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

Question

我有一个页面正在加载连接的阿波罗客户端页面作为主页面内的小部件。我的 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();

我如何告诉阿波罗客户端关闭自己？

Answer 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>

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

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

还有两个.close具有不同行为的参数。例如关闭并重新连接、关闭且不重新连接。