当前位置: 首页 > 工具软件 > vue-apollo > 使用案例 >

vue-apollo的多客户端的用法

呼延承平
2023-12-01

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

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

 类似资料: