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

为了获取服务端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. 引入 apollo-boost 模块并实例化

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

4. 配置 vue-apollo 插件

// src/main.js
import VueApollo from 'vue-apollo'
Vue.use(VueApollo);

5. 创建 Apollo provider

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

// src/main.js
const apolloProvider = new VueApollo({
    defaultClient: apolloClient
})

6. 将apolloProvider 挂载到vue

// src/main.js
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';


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


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


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


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

Vue.config.productionTip = false;

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