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;
});
},
其用法呢也就不做过多的介绍,因为另一篇文章也有做介绍,这篇文章只是接着上一篇