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

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.

About this issue

Original URL
State: open
Created 6 years ago
Reactions: 3
Comments: 16 (5 by maintainers)

Most upvoted comments

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,
	},
})

+12

Kresten on Jan 28, 2019

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

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

+11

stphdenis on Apr 22, 2020

@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.

joe-re on Jul 8, 2019

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

ZeD3v on Apr 11, 2019

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

Akryum on Mar 30, 2020

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
}

bbugh on Aug 5, 2019