Quasar v2 Vue-Apollo 设置

Question

我最近切换到 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);
  }
}

我得到的错误是

Property '$apollo' does not exist on type 'LoginPage'.

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

Answer 1

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

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

Quasar v2 Vue-Apollo 设置

Quasar v2 Vue-Apollo Setup

vue-apollo

quasar-framework

vuejs3