Skip to content

Typescript won't recognize fetchPolicy value as valid #936

Open
@richardaum

Description

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

image

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.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions