Apollo Client同一组件同时发起两个订阅时连接频繁断开重连问题

针对同一组件发起两个订阅时WebSocket每2秒断开重连的问题，可从以下几个方向排查解决：

1. 确保全局复用单个Apollo Client实例 #

检查你的Apollo Client初始化代码，确保整个应用只创建一次Client实例，且正确传入配置好的link。示例：

// apollo.js
import { ApolloClient, InMemoryCache } from '@apollo/client';
// ... 之前的httpLink、wsLink、link配置

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

然后通过ApolloProvider将该Client注入全局，避免在组件内部重复创建Client导致多连接冲突。

2. 修正WebSocket连接参数 #

检查connectionParams中的Authorization字段，你当前代码里存在多余空格（"Bearer TOKEN"），建议修正为：

connectionParams: {
  Authorization: "Bearer TOKEN", // 去掉多余空格
},

虽然单订阅时正常，但双订阅可能触发服务端更严格的认证校验，空格可能导致异常。

3. 排查GraphQL订阅文档定义 #

分别单独测试两个订阅（locationsLivesTrue和meUpdates），确认每个订阅单独运行时均稳定。如果其中一个订阅存在语法错误或服务端不支持的字段，可能导致双订阅时连接异常。

4. 调整WebSocket客户端重连配置 #

在createClient中添加重连延迟策略，并启用日志排查断开原因：

const wsLink = new GraphQLWsLink(
  createClient({
    url: process.env.WS_GRAPHQL,
    connectionParams: {
      Authorization: "Bearer TOKEN",
    },
    reconnect: true,
    reconnectDelay: (count) => Math.min(count * 1000, 5000), // 递增重连延迟，避免频繁重试
    on: {
      connected: () => console.log('WebSocket已连接'),
      disconnected: () => console.log('WebSocket已断开'),
      error: (err) => console.error('WebSocket错误详情:', err),
    },
  })
);

通过日志可以明确连接断开的具体原因（如服务端错误、认证失败等）。

5. 检查服务端配置 #

确认服务端的GraphQL订阅服务是否限制了单个连接的订阅数量，或存在短超时设置。例如Apollo Server的订阅配置中，是否调整了subscriptionServer的相关参数，避免因连接资源限制主动断开连接。

内容的提问来源于stack exchange，提问作者juanmac