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

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

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

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

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 () {
 this.lodAtemplate();
 }

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

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