GraphQL 进阶: 基于Websocket的实时Web应用开发

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

彻底Websocket传输比混合传输要简单. HTTP的传输是经过createNetworkInterface建立网络接口, 若是是Websocket, 则直接使用订阅客户端做为网络接口:

混合传输

源码在这里

# 建立HTTP网络接口用于: Query和Mutation

const httpNetworkInterface = createNetworkInterface({
  uri: '/api'
});

# 建立Websocket客户端用于Subscription

const subscriptionClient = new SubscriptionClient('ws://localhost:7003/feedback', {
  reconnect: true,
  connectionParams: {
    token: localStorage.getItem('token') ? localStorage.getItem('token') : null
  }
});

# 合成一个 Hybrid 传输层对象

const networkInterfaceWithSubscriptions = addGraphQLSubscriptions(
  httpNetworkInterface,
  subscriptionClient
);

# 用合成的网络接口示例去初始化ApolloClient

const 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.