介紹

承接上篇來介紹 ApolloData 使用 graphql hoc Query ，除了會撈到資料外 Apollo 會在 props 中多幾個 method ,接下來介紹 data.subscribeToMore(option):

透過 subscribeToMore 將啟動訂閱。Server上也設置訂閱才能正常工作。每當 Server 發送訂閱發佈時觸發更新

使用 subscribeToMore 函數會返回一個 unsubscribe 函數處理函數，可以有取消訂閱的功能。

通常的做法是在查詢完成後對在 componentWillReceiveProps 執行訂閱 subscribeToMore。 為了確保訂閱不是多次創建的，可以將其附加到組件實例。

option介紹 這邊跟一般 graphql 差不多 主要多了subscriptionData

document：文件是接受與創建 GraphQL 訂閱所需屬性graphql-tag的gql模板字符串標籤。它應該包含一個GraphQL訂閱操作，並返回將要返回的數據。

variables：變數改變就會到發fetch，變量要根據document的 gql 定義。

updateQuery：每次服務器發送更新時，都會運行的功能。這會修改HOC查詢的結果。第一個參數previousResult將是你在graphql()函數中定義的查詢所返回的之前的數據。第二個參數是一個有兩個屬性的對象。

subscriptionData： 訂閱的結果。

variables： 是與訂閱查詢一起使用的變量對象。使用這些參數，返回一個與graphql()函數中定義的GraphQL查詢形狀相同的新數據對象。這與fetchMore回調相似。或者，您可以使用reducer作為函數選項的一部分來更新查詢graphql()。

[onError]：一個可選的錯誤回調。

訂閱的結果更新查詢的 store (cache)，必須在 subscribeToMore 中指定 updateQuery 選項，或者在 graphql 函數中指定 reducer 選項。

class SubscriptionComponent extends Component {
  componentWillReceiveProps(nextProps) {
    if(!nextProps.data.loading) {
      // Check for existing subscription
      if (this.unsubscribe) {
        // Check if props have changed and, if necessary, stop the subscription
        if (this.props.subscriptionParam !== nextProps.subscriptionParam) {
          this.unsubscribe();
        } else {
          return;
        }
      }

      // Subscribe
      this.unsubscribe = nextProps.data.subscribeToMore({
        document: gql`subscription {...}`,
        updateQuery: (previousResult, { subscriptionData, variables }) => {
          // Perform updates on previousResult with subscriptionData
          return updatedResult;
        }
      });
    }
  }
  render() {
    ...
  }
}

總結

ApolloData 也做了訂閱這機制，就像 Firebase 只要 Server 端有異動就可以直接讓客戶端接收到通知，接收通知在 componentWillReceiveProps 生命週期去做異動