Typescript won't recognize `fetchPolicy` value as valid

[richardaum]

Describe the bug
When using fetchPolicy property on $apollo inside a Single File Vue Component, typescript throws the following error on terminal output:

... long error stacktrace ...
Types of property 'fetchPolicy' are incompatible.
  Type 'string' is not assignable to type '"no-cache" | "cache-first" | "network-only" | "cache-only" | "standby" | "cache-and-network" | undefined'.

The component is being defined the following way:

export default {
  apollo: {
    animals: {
      fetchPolicy: "network-only",
      query() {
        return gql`...`;
      },
      variables() {
        return { ... };
      },
      update(result) {
        return { ... };
      },
      error(error) {
        ...
      },
    },
  },
}

According to the docs, I should be able to use fetchPolicy this way:

To Reproduce
Steps to reproduce the behavior:

1. Create a Single File Component
2. Add an apollo property to it
3. Add fetchPolicy with a valid value
4. Run npm run serve
5. Observe the terminal output

Expected behavior
Typescript should not complain about valid values on fetchPolicy property.

Versions
vue: 2.6.11
vue-apollo: 3.0.3
apollo-client: 2.6.8

Additional context
Using this.$apollo.query method with fetchPolicy doesn't throw any related error, which could indicate this problem is related to the Typescript definition over apollo property.

[richardaum]

I was able to write it in another way by using a function instead of a object and it has fixed the error:

export default {
  apollo: {
    animals() {
      return {
        fetchPolicy: "network-only",
        query() {
          return gql``;
        },
        variables() {
          return {
            /* ... */
          };
        },
        update(result) {
          return {
            /* ... */
          };
        },
        error(error) {
          // ...
        }
      };
    }
  }
};

But I still think there's a bug if you're not using it as a function.

[gwardwell]

I'm experiencing the same problem in my App. When I write it this way, it fails:

import userQuery from '@/graphql/queries/user/user.graphql';
​
export default {
    apollo: {
        user: {
            query: userQuery,
            fetchPolicy: 'cache-only',
            prefetch: false,
        },
    },
}

I've tracked it down to the fetchPolicy as well. For some reason Typescript doesn't recognize 'cache-only' as a match for the WatchQueryFetchPolicy type: 'cache-first' | 'network-only' | 'cache-only' | 'no-cache' | 'standby' | 'cache-and-network'

If I import the `` type and cast my fetch policy to that type, then I'm good:

import { WatchQueryFetchPolicy } from 'apollo-client';
import userQuery from '@/graphql/queries/user/user.graphql';
​
export default {
    apollo: {
        user: {
            query: userQuery,
            fetchPolicy: 'cache-only' as WatchQueryFetchPolicy,
            prefetch: false,
        },
    },
}

Going the function route like @richardaum suggested also solves my problem:

import userQuery from '@/graphql/queries/user/user.graphql';
​
export default {
    apollo: {
        user() {
            return {
                query: userQuery,
                fetchPolicy: 'cache-only',
                prefetch: false,
            };
        },
    },
}

Any thoughts on what may be causing this or how it could be fixed?

[bbugh]

The first thing I see that could be potentially causing the issue is that you're both using export default {} instead of export default Vue.extend({}). See the docs about Vue TypeScript. I'm surprised anything works and compiles, because a lot of Vue's TS support depends on extending from the main object.

If that doesn't work, you might try rolling back to v3.0.0.rc7. Some of the types changed in rc8 and it broke some of my stuff too. See issue #847. If it works then but not now, it might help track down the problem.

[richardaum]

@bbugh Thanks for reply! You have a point about how that component is exported. But this is the way how vue-cli generates components when you create a project. Anyway I'll try your solution.

[silwals]

@richardaum I am facing similar issue with apollo-client (angular). Was this ever resolved?

https://github.com/apollographql/apollo-client/issues/7681

[sangdth]

I'm facing the similar issue on React as well.