淺談graphql的訂閱模式

fzzfxply發表於2020-03-26
模式

淺談graphql的訂閱模式

嘮叨幾句

這幾天一直在看 Graphql結合Apollo的官網和資料,加上最近遇到的一些問題所以整理一下最近寫的GraphqlApollo訂閱模式

1.配置Apollo檔案需要的依賴

import { getMainDefinition } from 'apollo-utilities'
import { split } from 'apollo-link'
import { createHttpLink } from 'apollo-link-http'
import { WebSocketLink } from 'apollo-link-ws';

複製程式碼

1.5首先需要使用WebSocketLink來進行訂閱連結

const makeApolloClient = (token = `autoforyou`) => {
  const httpLink = createHttpLink({
    uri: `網址`,
    headers: {
     
    },

  })
  
  const wsLink = new WebSocketLink({
    uri: `ws網址`,
    options: {
      reconnect: true,
      connectionParams: {
        headers: {
          "這裡寫token",
        }
      }
    }
  });
複製程式碼

正在例項化一個WebSocketLink知道訂閱端點的。在這種情況下，訂閱點類似於HTTP終結點，不同之處在於它使用ws而不是http協議。使用token從中檢索到的使用者身份驗證websocket連線localStorage

  const client = new ApolloClient({
    link,
    cache,
    
  });
複製程式碼

例項化APolloClient

2. 訂閱模式

在想要進行訂閱的地方放入subscribeToMore

  <Query query={FEED_QUERY}>
        {({ loading, error, data, subscribeToMore }) => {
            
        }}
 </Query>
複製程式碼

訂閱模式的查詢語句

const NEW_LINKS_SUBSCRIPTION = gql`
subscription MySubscription {
 customer {
   customer_name
   updated_at
   customer_source
   customer_tel
   id
   customer_phone
   industry {
     name
   }
   level {
     level_name
     id
   }
 }
}
複製程式碼

通過呼叫其各自的函式，可以確保該元件確實訂閱了事件

  <Query query={FEED_QUERY}>
        {({ loading, error, data, subscribeToMore }) => {
             this._subscribeToNewLinks(subscribeToMore)

        }}
 </Query>
複製程式碼

將兩個引數傳遞給subscribeToMore

  _subscribeToNewLinks =subscribeToMore  => {
    
    subscribeToMore({
      document: NEW_LINKS_SUBSCRIPTION,//下面有解釋
      updateQuery: (prev, { subscriptionData }) => {
        if (!subscriptionData.data) return prev;
        const newFeedItem = subscriptionData.data.customer;  
        console.log(newFeedItem)
       return Object.assign({}, prev, {
              customer: newFeedItem, ...prev.customer, //這裡其實我不懂為啥我放在[]裡就是一直重複的增加空白demo
               count: prev.customer.length + 1,
                __typename: prev.customer.__typename
            
  })
      }
    })
  }
複製程式碼

document：這代表訂閱查詢本身。就您而言，每次建立新連結時，訂閱都會觸發。 updateQuery :updateQuery：類似於快取update道具，此功能可讓您確定如何使用事件發生後伺服器傳送的資訊更新,在內部所做的全部工作updateQuery是從收到的連結中檢索新連結subscriptionData，將其合併到現有連結列表中，並返回此操作的結果。

3. 後記

這裡是我自己的總結從頭到尾訂閱的過程,如果發現錯誤，歡迎留言指出~

參考
1. Apollo官網: https://www.apollographql.com/docs/react/data/subscriptions/
2. 如何Graphql: https://www.howtographql.com/react-apollo/0-introduction/
複製程式碼

相關文章