如何優(yōu)雅的在Vue Project中使用vue-apollo

Noodles 發(fā)布于2019-08-20 18:37 / 1527人閱讀

摘要：首先我們來熟悉下的工作機(jī)制一個(gè)查詢可以包含一個(gè)或者多個(gè)操作，類似于一個(gè)。操作可以使兩種類型查詢或者修改。以后就又可以愉快的裝逼了本文章只適于初學(xué)者作者考拉閱讀前端工程師

首先我們來熟悉下graphql的工作機(jī)制

一個(gè)GraphQL查詢可以包含一個(gè)或者多個(gè)操作（operation），類似于一個(gè)RESTful API。操作（operation）可以使兩種類型：查詢（Query）或者修改（mutation）。我們看一個(gè)例子：

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

那么問題來了，我們已經(jīng)用熟了axios或者fetch 再或者ajax來進(jìn)行數(shù)據(jù)的交互，如：

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)
        })
    },

怎樣以我們熟悉的形式來運(yùn)用apollo，使查詢更加簡(jiǎn)便呢

首先我們先在vue項(xiàng)目中引用apollo-vue（apollo非親生兒子）作者是Guillaume Chau（vue的開發(fā)團(tuán)隊(duì)人員）

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"

構(gòu)建客戶端
可以構(gòu)建多個(gè)適應(yīng)不同接口

    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: "",
  components: { App }
})

好到此為止，基礎(chǔ)配置就已經(jīng)ok了
接下來就是實(shí)際的請(qǐng)求了
在vue 的組件中，比如 test.vue

我們的例子是帶參數(shù)的查詢
首先在組件里構(gòu)建查詢的變量

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)
        })
    }
    
這個(gè)形式是不是有點(diǎn)熟悉了。哈哈哈
可以了。以后就又可以愉快的裝逼了
本文章只適于初學(xué)者

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