vue-apollo的多客户端的用法

2019-12-23 23:38:59

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

    });

},


  • 2017-11-28 14:55:13

    使用 Vagrant 打造跨平台开发环境

    Vagrant 是一款用来构建虚拟开发环境的工具,非常适合 php/python/ruby/java 这类语言开发 web 应用,“代码在我机子上运行没有问题”这种说辞将成为历史。

  • 2017-11-28 14:57:19

    vagrant up 失败解决办法

    直接使用VirtualBox开启一个vm也会失败,基本上可以确定是VirtualBox版本的问题 有遇到过安装了VirtualBox-5.0.22-108108-Win.exe的版本在win7下用不了,卸载重装VirtualBox-4.3.12-93733-Win.exe之后可用。

  • 2017-12-05 22:30:02

    php7.0升级php7.2

    看电脑上的教程要备份7.0配置文件以及扩展啥的,我感觉不如卸载干净重新安装

  • 2017-12-06 09:35:10

    分页优化的四种方式

    在大数据量的情况下,原本很简单的分页如果没有处理好,你会发现分页的请求会消耗你大量的数据库时间。如果你遇到了这个问题,文章给了你几个很好的解决的方案。当然,初学者若能看完这篇文章,那么它会指导你写出更具有扩展性的分页代码。