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.