GraphQL学习第六篇－Vue中集成Vue-apollo

越陌度阡

发布于 2020-11-26 12:27:33

6470

发布于 2020-11-26 12:27:33

文章被收录于专栏：大前端（横向跨端 & 纵向全栈）

为了获取服务端GraphQl接口的数据，客户端需要使用apollo这个插件，三大前端框架均可以将apollo集成，下面以vue为例来说明在客户端如何集成vue-apollo这个插件。

1. 参考文档

Vue-apollo项目地址：https://github.com/Akryum/vue-apollo

Vue-apollo官方文档：https://vue-apollo.netlify.com/

2.安装模块

npm install vue-apollo graphql apollo-boost --save

或者

yarn add vue-apollo graphql apollo-boost

3. 在 src/main.js 中引入 apollo-boost 模块并实例化

import ApolloClient from 'apollo-boost'
const apolloClient = new ApolloClient({
    // 服务器的地址，注意后台添加graphql这个路由
    uri: 'http://118.123.14.36:3002/graphql'
})

4. 在 src/main.js 配置 vue-apollo 插件

import VueApollo from 'vue-apollo'
Vue.use(VueApollo);

5. 在src/main.js中创建 Apollo provider

Provider 保存了可以在接下来被所有子组件使用的 Apollo 客户端实例。

const apolloProvider = new VueApollo({
    defaultClient: apolloClient
})

6. 在src/main.js中将 apolloProvider 挂载到vue

new Vue({
    router,
    apolloProvider,
    render: h => h(App),
}).$mount('#app')

以上是vue中集成vue-apollo的基本步骤，下面是代码实例。

import Vue from 'vue'
import App from './App.vue'
import router from './router/router.js';


// 1.安装模块  npm install vue-apollo graphql apollo-boost --save


// 2.引入 apollo-boost 模块，并实例化 ApolloClient
import ApolloClient from 'apollo-boost'
const apolloClient = new ApolloClient({
    // 服务器的地址，注意在后台要配置graphql路由
    uri: 'http://118.123.14.36:3002/graphql'
})


// 3.配置vue-apollo插件
import VueApollo from 'vue-apollo'
Vue.use(VueApollo);


// 4.配置apolloProvider
const apolloProvider = new VueApollo({
    defaultClient: apolloClient,
})

Vue.config.productionTip = false;

// 5.apolloProvider挂载到vue实例里
new Vue({
    router,
    apolloProvider,
    render: h => h(App),
}).$mount('#app')

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2020/03/11 ，如有侵权请联系 cloudcommunity@tencent.com 删除

https