Apollo is not assignable to parameter of type 'VueClass<Vue>

Question

Iam building a 'Nuxt.js' app with typescript.

This is my code:

<script lang='ts'>
    import {Component, Vue} from 'nuxt-property-decorator';
    import {LOCATION} from '~/constants/graphql/location';

    @Component({
        apollo: {
            getLocation: {
                query: LOCATION,
                variables(): object {
                    return {
                        id: 10,
                    };
                },
                prefetch: true,
            },
        },
    })
    export default class Home extends Vue {
    }
</script>

I am getting the following error:

Argument of type '{ apollo: { getLocation: { query: any; variables(): object; prefetch: boolean; }; }; }' is not assignable to parameter of type 'VueClass<Vue>'.

Object literal may only specify known properties, and 'apollo' does not exist in type 'VueClass<Vue>'.

I know that's coming from TS but how to fix it?

Answer 1

The syntax for the "apollo" options you listed do indeed look correct- assuming you're intending to use the package "vue-apollo" to work with Apollo.

If you're getting this error it may mean that "vue-apollo" hasn't been installed, or there's some problem with the installation.

If you look in the Vue Chrome debugger tool on one of your pages, is the "$apollo" property present in all your components? If not, the issue is that the "vue-apollo" plugin hasn't been properly installed.