vue-apollo的多客户端的用法

vue-apollo的多客户端的用法以及apollo.js的配置

关于如何安装和如何使用，这篇文章就先暂时不介绍了，如果不清楚就看我另一篇关于vue-apollo的用法

在做项目中，有时候后端的接口是按模块功能去划分的，那么请求的地址就会不同，关于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({
  // You should use an absolute URL here
  uri: './v1/assess/api',
  credentials: 'same-origin',
});

const otherHttpLink = new HttpLink({
  // You should use an absolute URL here
  uri: './v1/broker', 
  // 这个地址就是我们做另外部分的功能所用到的接口地址
  credentials: 'same-origin',
});

// Create the apollo client
const apolloClient = new ApolloClient({
  link: httpLink,
  cache: new InMemoryCache(),
  connectToDevTools: true,
});

const otherApolloClient = new ApolloClient({
  link: otherHttpLink,
  cache: new InMemoryCache(),
  connectToDevTools: true,
});

export default new VueApollo({
  clients: {
    default: apolloClient,
    // 这个是我设置的默认接口的地址
    other: otherApolloClient,
    // 这是另一部分功能的接口地址，另外这个key名，在页面中写具体请求时会用到，因为我们要指定接口的地址
  },
  defaultClient: apolloClient,
});

那么配置好以后，关于用法，官方文档介绍了两种用法，那么我呢就以其中的一种做一个说明，因为我的项目中就是这么使用的：
例如：

loadPlan() {
    this.$apollo.query({
      query: getBrokerPlanDetail,
      variables: {
        id: this.planId,
      },
      client: 'other',
      //其中client是自己内置的属性，他的值注意要和自己在apollo.js中配置的key要保持一致
      fetchPolicy: 'no-cache',
    }).then(({ data }) => {
      this.brokerPLan = data.brokerPlan;
    });
},

其用法呢也就不做过多的介绍，因为另一篇文章也有做介绍，这篇文章只是接着上一篇