Quasar framework 配置vue apollo

Quasar 整合 vue-apollo

确保你已经知道quasar 和 vue apollo

在quasar中使用vue apollo客户端时出现的一点小问题

在quasar项目中使用vue-apollo其实就是将apollo作为一个插件导入

但是导入发现并不起作用，不能在vue组件中直接使用

即使在插件中使用了vueApollo

// plugins/vue-apollo.js
import VueApollo from 'vue-apollo'
import ApolloClient from 'apollo-boost'

const apolloClient = new ApolloClient({
  uri: 'http://localhost:4001/'
})

const apolloProvider = new VueApollo({
  defaultClient: apolloClient
})

export default async ({ app, Vue }) => {
  Vue.use(VueApollo)
  app.apolloProvider = apolloProvider
}

在组件中使用不了

<template>
  <div>{{ hello }}</div>
</template>

<script>
import gql from 'graphql-tag'

export default {
  apollo: {
    // 简单的查询，将更新 'hello' 这个 vue 属性
    hello: gql`query {
      hello
    }`,
  },
}
</script>

同时this.$apollo也无法使用

但是如果直接在代码中创建apolloClient进行查询

<template>
  <q-page class="flex-center">
    <div >xxx {{hello}} </div>
    <q-btn @click="sayHello">say</q-btn>
  </q-page>
</template>

<script>
import gql from "graphql-tag";
import ApolloClient from "apollo-boost";

export default {
  data() {
    return {
      hello: ''
    }
  },
  methods: {
    sayHello() {
      const apolloClient = new ApolloClient({
        uri: "http://localhost:4001/"
      });
      apolloClient
        .query({
          query: gql`
            query {
              hello
            }
          `
        })
        .then(res => {
          console.log(res.data);
          this.hello = res.data.hello;
        });
    }
  }
};
</script>

就可以成功的获取到。

这样来看就是没有注入进去，所以我们查看quasar官网

http://www.quasarchs.com/guide/app-plugins.html

将vue-apollo.js放在boot文件夹下，在quasar.conf.js

的boot中加入

    boot: [
      'i18n',
      'axios',
      'vue-apollo'
    ],

这样我们的应用就工作正常了！