扫一扫分享
vue Apollo是一个集成Apollo和GraphQL的Vue组件,可以让你在 Vue.js 应用中集成 GraphQL。
在这里,你可以查询正确的数据,尤其是你的应用程序或功能所需的数据。Apollo 组件以一种声明式的方式帮助使用 GraphQL 工具。它还支持 SSR。
vue-cli3
vue add apollo
npm(Apollo Boost)
npm i --save vue-apollo graphql apollo-boost
Yarn(Apollo Boost)
yarn add vue-apollo graphql apollo-boost
创建 ApolloClient 实例(Apollo Boost)
import ApolloClient from 'apollo-boost'
const apolloClient = new ApolloClient({
// 你需要在这里使用绝对路径
uri: 'https://api.graphcms.com/simple/v1/awesomeTalksClone'
})
引入并注册
import Vue from 'vue'
import VueApollo from 'vue-apollo'
Vue.use(VueApollo)
示例化
const apolloProvider = new VueApollo({
defaultClient: apolloClient,
})
new Vue({
el: '#app',
// 像 vue-router 或 vuex 一样注入 apolloProvider
apolloProvider,
render: h => h(App),
})
简单查询
<template>
<div>
<h3>Hello</h3>
<p>
{{hello}}
</p>
</div>
</template>
<script>
import gql from 'graphql-tag'
export default{
apollo: {
hello: gql`{hello}`,
},
data () {
return {
hello: '',
}
}
}
</script>
手机预览