配置
首先搭建好一个vue的项目
接着
npm install vue-apollo apollo-boost graphql
然后建立一个 vueApollo.js 的文件(注意我这里的 vueApollo.js 和 main.js 同级)
import VueApollo from 'vue-apollo'
import ApolloClient from 'apollo-boost'
import Vue from 'vue'
Vue.use(VueApollo);
const apolloClient = new ApolloClient({
uri: 'http://localhost:9000/graphql'
});
const apolloProvider = new VueApollo({
defaultClient: apolloClient,
})
export default apolloProvider;
然后在 main.js 中引入
import Vue from 'vue'
import App from './App'
import router from './router'
import apollo from './vueApollo.js'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
apolloProvider: apollo,
router,
components: { App },
template: '<App/>'
})
然后在建立 src/graphql/product.gql
query {
getProduct{
_id
name
active
}
}
然后在 components/HelloWorld.vue 中查询并打印
<script>
import gql from "./apollo.js";
export default {
name: "HelloWorld",
data() {
return {};
},
apollo: {
getProduct(){
return{
query:gql.Product,
update(data){
console.log(data.getProduct)
}
}
}
}
};
</script>
![](https://i-blog.csdnimg.cn/blog_migrate/cae7857959f56dca02b43e42e94dc983.png)