configuration
First build a vue project
and then
npm install vue-apollo apollo-boost graphql
Then create a vueApollo.js file (note that my vueApollo.js and main.js are at the same level)
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;
Then introduce in 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/>'
})
Then create src/graphql/product.gql
query {
getProduct{
_id
name
active
}
}
Then query and print in 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>
