最新的 subscriptions-transport-ws 模块已经支持完全的Websocket传输, 也就是说GraphQL的三大操作: Query, Mutation, 以及Subscription 全部都可以走Websocket, 实现真正的基于GraphQL的实时Web应用.

完全Websocket传输比混合传输要简单. HTTP的传输是通过createNetworkInterface创建网络接口, 如果是Websocket, 则直接使用订阅客户端作为网络接口:

混合传输

# 创建HTTP网络接口用于: Query和Mutationconst httpNetworkInterface = createNetworkInterface({  uri: '/api'});# 创建Websocket客户端用于Subscriptionconst subscriptionClient = new SubscriptionClient('ws://localhost:7003/feedback', {  reconnect: true,  connectionParams: {    token: localStorage.getItem('token') ? localStorage.getItem('token') : null  }});# 合成一个 Hybrid 传输层对象const networkInterfaceWithSubscriptions = addGraphQLSubscriptions(  httpNetworkInterface,  subscriptionClient);# 用合成的网络接口示例去初始化ApolloClientconst client = new ApolloClient({  networkInterface: networkInterfaceWithSubscriptions,  connectToDevTools: true,  dataIdFromObject: o => {    if (o.__typename != null && o.id != null) {      return `${o.__typename}-${o.id}`;    } else {      return `${o.id}`;    }  }});

创建订阅客户端

const subscriptionClient = new SubscriptionClient(config.prod.ws, {  reconnect: true,  connectionParams: {    token: localStorage.getItem('token') ? localStorage.getItem('token') : null  }});

创建客户端

# 对于完全的Websocket传输, 我们只需要一个 SubscriptionClient 实例const client = new ApolloClient({  networkInterface: subscriptionClient,  connectToDevTools: true,  dataIdFromObject: o => {    if (o.__typename != null && o.id != null) {      return `${o.__typename}-${o.id}`;    } else {      return `${o.id}`;    }  }});

升级到Websocket

之前的GraphQL API走的HTTP, 只需要创建 SubscriptionClient 的实例, 并且传递给 ApolloClient, 替换之前的混合传输, 直接无痛升级. 服务器代码不需要做任何修改.

最后澄清一下

Http和Websocket网络接口是用于传输数据的应用层协议. ApolloClient 客户端提供了GraphQL操作, 比如: Query, Mutation和Subscription.