1、首先我們需要安裝一下vue-apollo 具體執行命令如下：
npm install –save vue-apollo graphql apollo-client apollo-link apollo-link-http apollo-cache-inmemory graphql-tag
2、在我們的專案的根目錄下建立一個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本身傳送的是一個fetch請求，所以在傳送請求時不會自動攜帶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 },
});

準備好這些，我們就可以開始使用了，另外如果有谷歌賬號，可以在谷歌的應用商店去下載“Apollo Client Developer Tools”外掛，來模擬vue-apollo呼叫介面，當然你也可以直接看後端的程式碼，然後看介面的定義
4，然後在專案的根目錄下建立一個graphql資料夾，這個檔案裡面去封裝每一個模組所對應的方法，為了程式碼的簡潔，可以每一個模組建立一個js檔案，實現介面方法的統一管理，比如說我建立了一個交atemplate.graphql檔案，注意這個資料夾下所有的檔案字尾名都是.graphql。
首先我們說一下query方式的呼叫：具體程式碼如下：

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，然後將該方法引入到所需要呼叫的vue檔案中引入方式如下：

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

然後在vue的methods中定義一個方法，最後呼叫
lodAtemplate() {
     this.$apollo.query({
              query: getAssessTemplateListings,
              variables: {
                state: 1,
                page: this.currentPage,
                pageSize: this.pageSize,
              },
              fetchPolicy: 'network-only',
              /* 如果一個獲取資料的列表，在引數沒有變化的時候，那我們希望用後臺資料的快取，則需要在請求下方加上  fetchPolicy: 'network-only'來做快取 */
            }).then(({ data }) => {
              const assessTempalteListings = data.assessTemplateListings;
              consloe.log(assessTempalteListings);
            });
}

 根據我們的需求因為是獲取列表的，所以在created方法裡面去呼叫這個方法即
 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));
     });
}

用法我們就說完了，接下來總結一下
1、因為前端採用vue-apollo客戶端傳送fetch方式的graphql的請求，而fetch請求也有的缺點：fetch只對網路請求報錯，對400,500都當做成功的請求，需要封裝去處理，所以說對於vue-axios的try，catch是獲取不到錯誤的，Apollo請求超時的問題無法解決，httpLink沒有提供timeout的介面，導致無法中斷或重連當前請求
2、通過Apollo查詢返回的資料是freeze狀態，無法修改，可以通過物件淺拷貝或者序列化的方式解凍。這個坑我自己趟過。
因為我要做一個對於某一個模板增加適用模板區域的功能，那麼要求是先呼叫模板詳情介面，如果有區域就顯示出來，對已有的區域可以做增刪改的功能，獲取到資料後存在vuex中，當我新增完成後更改vuex的資料報錯，意思是不允許更改，解決辦法就是在初始化vuex的資料時先深拷貝一份資料存入到vuex中，而不是直接存入，另外建議可以使用lodash.js，因為這個js庫集成了很多方法，不用寫那麼多繁瑣的程式碼
3、再說一下query和mutaionl兩種方式解釋，按照官方的意思是
query：僅獲取資料（fetch）的只讀請求
mutaion：獲取資料後還有寫操作的請求
我個人認為，vue-apollo中的query方式就類似於Ajax中的get請求，而mutaion就類似於post請求