Quasar v2 Vue-Apollo Setup

Question

I've recent switched over to Quasar v2 and I'm having trouble getting the info I need for the vue apollo setup. I am using https://apollo.vuejs.org/guide/installation.html#_1-apollo-client to try and install vue apollo into the framework using the boot file.

This is my boot/apollo.ts file

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 };

And this is where I am trying to use it:

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

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

The error I'm getting is

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

I can see in the comment for the globalProperties it mentions the vue options api. Not sure if this is happening because I use vue-class-component.

Answer 1

I ended up added this below the export

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