如何優雅的在Vue Project中使用vue-apollo

首先咱們來熟悉下graphql的工做機制

一個GraphQL查詢能夠包含一個或者多個操做（operation），相似於一個RESTful API。操做（operation）能夠使兩種類型：查詢（Query）或者修改（mutation）。咱們看一個例子：

`query {
  client(id: 1) {
    id 
    name
  }
}`

那麼問題來了，咱們已經用熟了axios或者fetch 再或者ajax來進行數據的交互，如：

getRecommdBook (type) {
      this.axios.get(`/books/web/recommendation-api/recommendation/official?type=${type}`)
        .then(res => {
          if (res.data) {
            this.recommdBookfun(res.data)
            console.log(this.recommdBook)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },

怎樣以咱們熟悉的形式來運用apollo，使查詢更加簡便呢

首先咱們先在vue項目中引用apollo-vue（apollo非親生兒子） 做者是Guillaume Chau（vue的開發團隊人員）

git：https://github.com/Akryum/vue...

npm install --save vue-apollo apollo-client

main.js引用

// apollo配置

    import { ApolloClient, createNetworkInterface } from 'apollo-client'
    import VueApollo from 'vue-apollo'

構建客戶端
能夠構建多個適應不一樣接口

const networkInterfaceTask = createNetworkInterface({
      uri: '/api/tasks/graphql',
      transportBatching: true,
      opts: {
        credentials: 'include'
      }
    })
    
    const apolloClientTask = new ApolloClient({
      networkInterface: networkInterfaceTask,
      connectToDevTools: true
    })
    
    const apolloProvider = new VueApollo({
      clients: {
        task: apolloClientTask
      },
      defaultClient: apolloClientTask
    })

使用apollo

Vue.use(VueApollo)

根目錄引用

new Vue({
  el: '#app',
  router,
  axios,
  store,
  apolloProvider,
  template: '<App/>',
  components: { App }
})

好到此爲止，基礎配置就已經ok了
接下來就是實際的請求了
在vue 的組件中，好比 test.vue

咱們的例子是帶參數的查詢
首先在組件裏構建查詢的變量

import gql from 'graphql-tag'

const getErSeasons = gql`query erSeasons($classId: Long!) {
                            erSeasons{
                              id
                              name
                              startTime
                              endTime
                              classTask(class:$classId){
                                id
                                classId
                                startTime
                                endTime
                                status
                              }
                            }
                          }`

不懂的話先去查下教程api
而後在methods裏面

changeClass (id) {
      this.ClassSeasons = []
      this.Select = id
      console.log(this.$apollo.query)
      this.$apollo.query({
        query: getErSeasons,
        variables: {
          classId: this.Select
        }
      })
        .then(res => {
          this.Parse(res.data.erSeasons)
          console.log(res)
        })
        .catch(err => {
          console.log(err)
        })
    }
    
這個形式是否是有點熟悉了。哈哈哈
能夠了。之後就又能夠愉快的裝逼了
本文章只適於初學者

做者：考拉閱讀前端工程師