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.