vueapollo & graphql

配置

首先搭建好一个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>