参考地址 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;
});
},