快捷導(dǎo)航

詳解在vue-cli中使用graphql即vue-apollo的用法

更新時間：2018年09月08日 16:29:58 作者：zah521999

這篇文章主要介紹了詳解在vue-cli中使用graphql即vue-apollo的用法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

1、首先我們需要安裝一下vue-apollo 具體執(zhí)行命令如下：

npm install –save vue-apollo graphql apollo-client apollo-link apollo-link-http apollo-cache-inmemory graphql-tag 

2、在我們的項目的根目錄下創(chuàng)建一個vueApollo.js文件具體配置如下：

import { ApolloClient } from 'apollo-client';
import { HttpLink } from 'apollo-link-http';
import { InMemoryCache } from 'apollo-cache-inmemory';
import VueApollo from 'vue-apollo';
const httpLink = new HttpLink({
 uri: './v1/assess/api',
 /* 其中./v1是我在vue的config中配置時解決跨域時起的代理一個名字，后面的是后端
 暴露接口方法的地址 */
 credentials: 'same-origin',
 /* 這個屬性的意思是在同源的情況下攜帶cookie,因為vue-apollo本身發(fā)送的是一個fetch請求，所以在發(fā)送請求時不會自動攜帶cookie，所以我們需要加上此屬性 */
});
const apolloClient = new ApolloClient({
 link: httpLink,
 cache: new InMemoryCache(),
 connectToDevTools: true,
});
export default new VueApollo({
 defaultClient: apolloClient,
 clients: { default: apolloClient },
});

3,接著我們將配置好的js文件引入到man.js中，具體如下：

import Vue from 'vue';
import ElementUI from 'element-ui';
import VueApollo from 'vue-apollo';
import apolloProvider from './apollo';

// Install the vue plugin

// Vue.component('full-calendar', fullCalendar);
Vue.config.productionTip = false;
Vue.use(ElementUI);
Vue.use(VueApollo);

/* eslint-disable no-new */
new Vue({
 el: '#app',
 provide: apolloProvider.provide(),
 //這句代碼是我們要和vuex一樣，將apolloProvider添加為根組件
 router,
 store,
 template: '<App/>',
 components: { App },
});

準(zhǔn)備好這些，我們就可以開始使用了，另外如果有谷歌賬號，可以在谷歌的應(yīng)用商店去下載“Apollo Client Developer Tools”插件，來模擬vue-apollo調(diào)用接口，當(dāng)然你也可以直接看后端的代碼，然后看接口的定義

4，然后在項目的根目錄下創(chuàng)建一個graphql文件夾，這個文件里面去封裝每一個模塊所對應(yīng)的方法，為了代碼的簡潔，可以每一個模塊建立一個js文件，實現(xiàn)接口方法的統(tǒng)一管理，比如說我創(chuàng)建了一個交atemplate.graphql文件，注意這個文件夾下所有的文件后綴名都是.graphql。

首先我們說一下query方式的調(diào)用：具體代碼如下：

query getAssessTemplateListings($query: String, $state: Int, $page: Int, $pageSize: Int) {
 assessTemplateListings(query: $query, state: $state, page: $page, pageSize: $pageSize) {
 assessTemplates {
  id
  groupId
  name
  description
  state
  createdAt
  updatedAt
 }
 page
 pageSize
 total
 }
}

5，然后將該方法引入到所需要調(diào)用的vue文件中引入方式如下：

復(fù)制代碼代碼如下:

import { getAssessTemplateListings, stopAssessTemplate } from '@/services/graphql/assessTemplate.graphql';

然后在vue的methods中定義一個方法，最后調(diào)用

lodAtemplate() {
  this.$apollo.query({
    query: getAssessTemplateListings,
    variables: {
    state: 1,
    page: this.currentPage,
    pageSize: this.pageSize,
    },
    fetchPolicy: 'network-only',
    /* 如果一個獲取數(shù)據(jù)的列表，在參數(shù)沒有變化的時候，那我們希望用后臺數(shù)據(jù)的緩存，則需要在請求下方加上 fetchPolicy: 'network-only'來做緩存 */
   }).then(({ data }) => {
    const assessTempalteListings = data.assessTemplateListings;
    consloe.log(assessTempalteListings);
   });
}

根據(jù)我們的需求因為是獲取列表的，所以在created方法里面去調(diào)用這個方法即

 created () {
 this.lodAtemplate();
 }

然后再看一下mutation的用法，封裝如下：

mutation stopAssessTemplate($input: StopAssessTemplateInput!) {
 stopAssessTemplate(input: $input) {
 clientMutationId
 }
}

在vue中的使用

stop () {
 this.$apollo.mutate({
  mutation: stopAssessTemplate,
  variables: {
  input: {
   clientMutationId: uuidv1(),
   id: obj.id,
  },
  },
  }).then(() => {
  }).catch((error) => {
  this.$message.error(Util.Comm.graphqlError(error.message));
  });
}

用法我們就說完了，接下來總結(jié)一下

1、因為前端采用vue-apollo客戶端發(fā)送fetch方式的graphql的請求，而fetch請求也有的缺點：fetch只對網(wǎng)絡(luò)請求報錯，對400,500都當(dāng)做成功的請求，需要封裝去處理，所以說對于vue-axios的try，catch是獲取不到錯誤的，Apollo請求超時的問題無法解決，httpLink沒有提供timeout的接口，導(dǎo)致無法中斷或重連當(dāng)前請求

2、通過Apollo查詢返回的數(shù)據(jù)是freeze狀態(tài)，無法修改，可以通過對象淺拷貝或者序列化的方式解凍。這個坑我自己趟過。
因為我要做一個對于某一個模板增加適用模板區(qū)域的功能，那么要求是先調(diào)用模板詳情接口，如果有區(qū)域就顯示出來，對已有的區(qū)域可以做增刪改的功能，獲取到數(shù)據(jù)后存在vuex中，當(dāng)我添加完成后更改vuex的數(shù)據(jù)報錯，意思是不允許更改，解決辦法就是在初始化vuex的數(shù)據(jù)時先深拷貝一份數(shù)據(jù)存入到vuex中，而不是直接存入，另外建議可以使用lodash.js，因為這個js庫集成了很多方法，不用寫那么多繁瑣的代碼

3、再說一下query和mutaionl兩種方式解釋，按照官方的意思是