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

Noodles 發布于2019-08-20 18:37 / 1528人閱讀

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

首先我們來熟悉下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: "",
  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)
        })
    }
    
這個形式是不是有點熟悉了。哈哈哈
可以了。以后就又可以愉快的裝逼了
本文章只適于初學者

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/84786.html

Vue-apollo — 在Vue-cli項目中使用Graphql

摘要：在項目中使用當然我們可以通過直接在中攜帶參數直接請求，這樣太過麻煩。為我們提供了一整套解決方案，可以解決大部分問題。本篇文章將介紹如何在你的項目中簡單使用和一些目前遇到的小坑。 Vue-apollo — 在Vue-cli項目中使用Graphql Vue-apollo — Integrates apollo in your Vue components with declarative...

TIGERB 2019-08-22 15:36 評論0 收藏0
在vue項目中集成graphql 即vue-ApolloClient

摘要：什么是是一個用于的查詢語言，是一個使用基于類型系統來執行查詢的服務端運行時下圖展示所處的位置優點有強類型是強類型的，可使用來定義。 1.什么是graphqlGraphQL 是一個用于 API 的查詢語言，是一個使用基于類型系統來執行查詢的服務端運行時下圖展示graphql所處的位置showImg(https://segmentfault.com/img/bVbgDGe?w=905&h=...

princekin 2019-08-23 11:51 評論0 收藏0
GraphQL 科普前端向

摘要：樣例前端傳入字段和結構。后臺按照前端的需求返回數據。則將前后臺通信直接分為兩大類和。顧名思義，是默認的操作符，代表查詢，是不會給服務端帶來副作用的請求。文檔文檔部分文檔就是前端向后臺描述所需的字段。降低前后端溝通成本。簡介 showImg(https://segmentfault.com/img/bVbmKX5?w=150&h=150); GraphQL是基于「類型系統」來執行查詢的...

Bmob 2019-08-23 14:31 評論0 收藏0
前端每周清單：Node.js 微服務實踐，Vue.js 與 GraphQL，Angular 組件技巧

摘要：前端每周清單第期微服務實踐，與，組件技巧，攻防作者王下邀月熊編輯徐川前端每周清單專注前端領域內容，以對外文資料的搜集為主，幫助開發者了解一周前端熱點分為新聞熱點開發教程工程實踐深度閱讀開源項目巔峰人生等欄目。前端每周清單第 26 期：Node.js 微服務實踐，Vue.js 與 GraphQL，Angular 組件技巧，HeadlessChrome 攻防作者：王下邀月熊編輯：徐川...

wall2flower 2019-08-21 11:55 評論0 收藏0
如何在github上創建個人項目的在線演示demo

摘要：在上搜索相關項目時會發現，有的項目不光寫了一手好文檔并且還給出了項目的在線運行。如何在維護源代碼的同時并同時生成項目主頁以下以的單頁應用為例，給出完整的項目維護以及生成項目主頁的步驟。后期可在該基礎上進行自己項目的開發。前言 Github作為目前優秀的同性交友平臺，其上維護了眾多優秀的開源項目。目前Github上關于前端的項目也是數不勝數，Vue、React、Angular等等。自己...

kid143 2019-08-20 14:26 評論0 收藏0