嘿，我来帮你搞定这个问题！基于你给出的代码片段，我整理了完整的客户端配置步骤，帮你正确接入WebSocket订阅端点：

首先，我们需要补全WebSocketLink的初始化，并通过split函数区分HTTP请求（查询/变异）和WebSocket请求（订阅），确保不同操作走对应的链路。

完整配置代码 #

import React from "react";
import { Meteor } from "meteor/meteor";
import { render } from "react-dom";
import { ApolloProvider } from "react-apollo";
import { ApolloLink, from } from "apollo-link";
import { ApolloClient } from "apollo-client";
import { HttpLink } from "apollo-link-http";
import { InMemoryCache } from "apollo-cache-inmemory";
import { onError } from 'apollo-link-error';
import { split } from 'apollo-link';
import { WebSocketLink } from 'apollo-link-ws';
// 导入工具函数判断操作类型
import { getOperationDefinition } from 'apollo-utilities';

// 1. 初始化HTTP链路（处理查询和变异）
const httpLink = new HttpLink({
  uri: '/graphql', // 你的HTTP GraphQL端点，根据实际地址调整
});

// 2. 初始化WebSocket链路（处理订阅）
const wsLink = new WebSocketLink({
  uri: 'ws://localhost:3000/graphql/subscriptions', // 替换成你的WebSocket订阅端点
  options: {
    reconnect: true, // 断开后自动重连
    // 如果需要认证，可以在这里添加connectionParams，比如携带token
    // connectionParams: {
    //   authToken: localStorage.getItem('authToken'),
    // }
  }
});

// 3. 用split函数区分操作类型：订阅走WS，其他走HTTP
const splitLink = split(
  ({ query }) => {
    const definition = getOperationDefinition(query);
    return definition.kind === 'OperationDefinition' && definition.operation === 'subscription';
  },
  wsLink,
  httpLink,
);

// 4. 错误处理链路
const errorLink = onError(({ graphQLErrors, networkError }) => {
  if (graphQLErrors)
    graphQLErrors.forEach(({ message, locations, path }) =>
      console.log(`[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`),
    );
  if (networkError) console.log(`[Network error]: ${networkError}`);
});

// 5. 创建ApolloClient实例
const client = new ApolloClient({
  link: from([errorLink, splitLink]), // 合并错误链路和分流链路
  cache: new InMemoryCache(),
});

// 6. 用ApolloProvider包裹应用根组件
render(
  <ApolloProvider client={client}>
    {/* 你的应用根组件 */}
  </ApolloProvider>,
  document.getElementById('root')
);

关键说明 #

• WebSocket端点配置：wsLink的uri要和后端配置的订阅端点一致，比如如果后端用Apollo Server，通常会把订阅端点设为ws://your-domain/graphql/subscriptions，本地开发则是ws://localhost:3000/graphql/subscriptions。
• 操作分流：split函数通过getOperationDefinition判断当前操作是否为subscription，是的话走WebSocket链路，否则走HTTP链路。
• 重连与认证：options里的reconnect: true能让WebSocket断开后自动尝试重连；如果需要认证，可以在connectionParams里携带token等信息，后端可通过这些参数验证用户身份。
• GraphIQL关联：GraphIQL里的订阅功能会自动使用你配置的WebSocket端点，只要后端正确暴露了订阅服务，你就能在GraphIQL里直接测试订阅了。

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