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
}

在组件中使用不了

同时this.$apollo也无法使用

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

就可以成功的获取到。

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

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

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

的boot中加入

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

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