Cannot use apollo in Typescript @Component decorator with 'components' key

[tqwewe]

In my vue typescript application, I'm trying to use vue apollo with the vue-property-decorator library.

I have the following code:

import { Component, Prop, Vue } from 'vue-property-decorator'
import HeaderPrimary from '@/components/Header/HeaderPrimary.vue'
import query from '@/graphql/users.gql'

@Component({
	components: {           // Error from here
		HeaderPrimary,  // ...
	},                      // to here.
	apollo: {
		users: query,
	},
})
export default class TheHeader extends Vue {
	users: any = null
}

I'm receiving the following error:

Argument of type '{ components: { HeaderPrimary: {}; }; apollo: { users: DocumentNode; }; }' is not assignable to parameter of type 'VueClass<Vue>'.
  Object literal may only specify known properties, but 'components' does not exist in type 'VueClass<Vue>'. Did you mean to write 'component'?

When I remove the apollo part of the @Component, the error goes away.

The app still runs fine and queries correctly, but unfortunately I'm not sure how to get past this TypeScript error.

[Kresten]

I had the same type error problem and looked at the typings for the VueApolloComponentOptions. It seems the query should be either a DocumentNode or a function returning a DocumentNode, but for some reason, it errors on the DocumentNode alone.

Your error should be sorted out with

@Component({
	components: {           
		HeaderPrimary, 
	},        
	apollo: {
		users: () => query,
	},
})

[ZeD3v]

I have exactly the same issue and unfortunately @Kresten suggestion didn't work for me. Any help would be much appreciated :)

Source:

index.vue

import { Vue, Component } from 'vue-property-decorator';

import gqlTranslations from './translations.gql';
import Logo from '~/components/Logo.vue';

@Component({
  components: {
    Logo,
  },
  apollo: {
    translations: {
      query: gqlTranslations,
      variables() {
        return {
          namespace: 'index',
          language: 'en',
        };
      },
    },
  },
})
export default class IndexPage extends Vue {
  private translations = {};
}

translations.gql

query translations($namespace: String!, $language: String!) {
  translations(input: { namespace: $namespace, language: $language })
}

[gdpaulmil]

any solution to this?

[joe-re]

@acidic9 @jurgisrudaks @gdpaulmil

I suggest this is not gonna be happened if vue-apollo module is imported correct.
If it's not loaded, it could be like as @acidic9 said.
like below

but if you import vue-apollo module somewhere on your codebase, it should be work.
As you can see error has disapieared.

[bbugh]

That doesn't work for me. I've imported vue-apollo as shown and in multiple other places. The only situation that works for a DocumentNode is assigning with a function:

import { SomeDocument } from 'documents'

apollo: {
  thing: () => SomeDocument
}

[joe-re]

@bbugh
Can you share us whole of your example?
This code is working for me..

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import gqlTranslations from "./test.graphql";
import Logo from "~/components/Logo.vue";
import "vue-apollo";

@Component({
  components: {
    Logo
  },
  apollo: {
    translations: () => gqlTranslations
  }
})
export default class IndexPage extends Vue {
  private translations = {};
}
</script>

Also I think you can write it like this. Does this work for you?

@Component({
  components: {
    Logo
  },
  apollo: {
    translations: {
      query: () => gqlTranslations
    },
  },
})

[gotenxds]

Using a function works but it's not ideal. When will this be fixed ?

[Akryum]

It will be fixed by using the composition function. I'm almost giving up fixing all of those typing issues, which is both frustrating and taking way too much of my time (still open to PRs 😸 ).

[CodePlato3721]

@Akryum

By mentioned about composition function, Do you mean Vue Composition API?

Could you help to explain how to use the composition function to fix this?

Is it like

setup() {
    const apollo = {};
    apollo.addSmartQuery('todoList', ...);

    // expose to template
    return {
      apollo
    }
  }

or like this?

setup() {
    const apollo = {
      todoList: {
         query: getTodoList
      }
    };

    // expose to template
    return {
      apollo
    }
  }

[Akryum]

See https://v4.apollo.vuejs.org/guide-composable/

[stphdenis]

Just add "vue-apollo" in tsconfig.json :

{
  "compilerOptions": {
    "types": [..., "vue-apollo"]
  }
}