Quasar v2 Vue-Apollo 设置

问题描述

我最近切换到 Quasar v2，但无法获取 vue apollo 设置所需的信息。我正在使用 https://apollo.vuejs.org/guide/installation.html#_1-apollo-client 尝试使用引导文件将 vue apollo 安装到框架中。

这是我的 boot/apollo.ts 文件

import { boot } from 'quasar/wrappers';
import ApolloClient from 'apollo-boost';
import VueApollo from 'vue-apollo';

const apollo = new ApolloClient({
  uri: 'https://api.graphcms.com/simple/v1/awesoMetalksClone',});
const apolloProvider = new VueApollo({
  defaultClient: apollo,});

export default boot(({ app }) => {
  // for use inside Vue files (Options API) through this.$apollo

  app.config.globalProperties.$apollo = apollo;
  // ^ ^ ^ this will allow you to use this.$apollo (for Vue Options API form)
  //       so you won't necessarily have to import apollo in each vue file
});

export { apollo,VueApollo,apolloProvider };

这就是我尝试使用它的地方：

import { Vue } from 'vue-class-component';

export default class LoginPage extends Vue {
  public login() {
    console.log(this.$apollo);
  }
}

我得到的错误是

“LoginPage”类型上不存在属性“$apollo”。

我可以在 globalProperties 的评论中看到它提到了 vue options api。不确定是否发生这种情况，因为我使用的是 vue-class-component。

解决方法

我最终在导出下面添加了这个

declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    $apollo: FunctionConstructor;
  }
}