为了获取服务端GraphQl接口的数据&＃xff0c;客户端需要使用apollo这个插件&＃xff0c;三大前端框架均可以将apollo集成&＃xff0c;下面以vue为例来说明在客户端如何集成vue-apollo这个插件。
1. 参考文档
Vue-apollo项目地址&＃xff1a;https://github.com/Akryum/vue-apollo
Vue-apollo官方文档&＃xff1a;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 &＃39;apollo-boost&＃39;
const apolloClient &＃61; new ApolloClient({// 服务器的地址&＃xff0c;注意后台添加graphql这个路由uri: &＃39;http://118.123.14.36:3002/graphql&＃39;
})
4. 配置 vue-apollo 插件
// src/main.js
import VueApollo from &＃39;vue-apollo&＃39;
Vue.use(VueApollo);
5. 创建 Apollo provider
Provider 保存了可以在接下来被所有子组件使用的 Apollo 客户端实例。
// src/main.js
const apolloProvider &＃61; new VueApollo({defaultClient: apolloClient
})
6. 将apolloProvider 挂载到vue
// src/main.js
new Vue({router,apolloProvider,render: h &＃61;> h(App),
}).$mount(&＃39;#app&＃39;)
以上是vue中集成vue-apollo的基本步骤&＃xff0c;下面是代码实例。
import Vue from &＃39;vue&＃39;
import App from &＃39;./App.vue&＃39;
import router from &＃39;./router/router.js&＃39;;// 安装模块 npm install vue-apollo graphql apollo-boost --save// 引入 apollo-boost 模块&＃xff0c;并实例化 ApolloClient
import ApolloClient from &＃39;apollo-boost&＃39;
const apolloClient &＃61; new ApolloClient({// 服务器的地址&＃xff0c;注意在后台要配置graphql路由uri: &＃39;http://118.123.14.36:3002/graphql&＃39;
})// 配置vue-apollo插件
import VueApollo from &＃39;vue-apollo&＃39;
Vue.use(VueApollo);// 配置apolloProvider
const apolloProvider &＃61; new VueApollo({defaultClient: apolloClient,
})Vue.config.productionTip &＃61; false;// apolloProvider挂载到vue实例里
new Vue({router,apolloProvider,render: h &＃61;> h(App),
}).$mount(&＃39;#app&＃39;)
京公网安备 11010802041100号