Node.js中Apollo Client订阅功能异常报错，请求排查方案

核心原因 #

• HTTP链接不支持订阅协议：你当前使用的createHttpLink仅能处理GraphQL的查询（Query）和突变（Mutation）操作，而订阅（Subscription）需要基于WebSocket的双向通信协议——HTTP是单向请求响应模式，无法维持长连接接收实时推送。
• 客户端未配置订阅专用传输层：Apollo Client默认不会自动处理订阅逻辑，必须显式配置支持WebSocket的链接来处理订阅请求。

修复步骤 #

1. 安装订阅依赖包 #

Apollo Client官方推荐使用graphql-ws作为订阅的WebSocket客户端，执行以下命令安装：

npm install graphql-ws

2. 修改客户端配置代码 #

替换原有的链接配置，使用split函数根据操作类型自动分发请求（查询/突变走HTTP，订阅走WebSocket）：

const { ApolloClient, InMemoryCache, createHttpLink, split } = require('@apollo/client');
const { createClient } = require('graphql-ws');
const { getMainDefinition } = require('@apollo/client/utilities');

// HTTP端点（处理查询和突变）
const httpEndpoint = 'http://localhost:5000/graphql/';
// WebSocket端点（处理订阅，协议替换为ws/wss）
const wsEndpoint = 'ws://localhost:5000/graphql/';

// 创建HTTP链接
const httpLink = createHttpLink({
  uri: httpEndpoint,
});

// 创建WebSocket订阅链接
const wsLink = createClient({
  url: wsEndpoint,
});

// 拆分链接：根据操作类型选择对应传输层
const splitLink = split(
  ({ query }) => {
    const definition = getMainDefinition(query);
    return (
      definition.kind === 'OperationDefinition' &&
      definition.operation === 'subscription'
    );
  },
  wsLink,
  httpLink
);

// 初始化配置好的Apollo Client
const client = new ApolloClient({
  link: splitLink,
  cache: new InMemoryCache(),
});

// 订阅查询保持不变
const YOUR_SUBSCRIPTION_QUERY = `
  subscription OnAlertAdded {
    onAlertAdded(clientId: 1) {
      id
      name
    }
  }
`;

// 订阅逻辑保持不变
client.subscribe({
  query: YOUR_SUBSCRIPTION_QUERY,
}).subscribe({
  next: (data) => {
    console.log('Received data:', data);
  },
  error: (error) => {
    console.error('Subscription error:', error);
  },
});

3. 验证服务器端点 #

确保你的GraphQL服务器已配置WebSocket支持，且wsEndpoint的地址与服务器WebSocket监听地址一致（通常和HTTP端点路径相同，仅协议替换为ws/wss）。

补充说明 #

Postman能正常运行订阅是因为它内部自动处理了WebSocket连接的建立流程，而Node.js代码需要显式配置对应的传输层链接才能支持订阅操作。

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