Vue-apollo: TypeScript compilation error with latest apollo packages

[bbugh]

It looks like Apollo changed some types in the latest versions, and vue-apollo is no longer compiling.

I'm on "vue-apollo": "^3.0.0-beta.28",

Here are the packages I upgraded to:

  "dependencies": {
    "apollo-cache-inmemory": "^1.5.1",
    "apollo-client": "^2.5.1",
    "apollo-link": "^1.2.11",
    "apollo-link-context": "^1.0.17",
    "apollo-link-error": "^1.1.10",
    "apollo-link-http": "^1.5.14",
    "apollo-link-ws": "^1.0.17",
    "apollo-utilities": "^1.2.1",
  },
  "devDependencies": {
    "@types/graphql": "^14.2.0",
  }

ERROR in /Users/bbugh/projects/project-name/develop/node_modules/apollo-client/core/LocalState.d.ts
ERROR in /Users/bbugh/projects/project-name/develop/node_modules/apollo-client/core/LocalState.d.ts(39,23):
TS2315: Type 'ExecutionResult' is not generic.

ERROR in /Users/bbugh/projects/project-name/develop/node_modules/apollo-client/core/LocalState.d.ts
ERROR in /Users/bbugh/projects/project-name/develop/node_modules/apollo-client/core/LocalState.d.ts(43,17):
TS2315: Type 'ExecutionResult' is not generic.

ERROR in /Users/bbugh/projects/project-name/develop/node_modules/vue-apollo/types/options.d.ts
ERROR in /Users/bbugh/projects/project-name/develop/node_modules/vue-apollo/types/options.d.ts(47,18):
TS2430: Interface 'VueApolloMutationOptions<V, R>' incorrectly extends interface 'MutationOptions<R, OperationVariables>'.
  Types of property 'mutation' are incompatible.
    Type 'import("/Users/bbugh/projects/project-name/develop/node_modules/@types/graphql/language/ast").DocumentNode' is not assignable to type 'import("/Users/bbugh/projects/project-name/develop/node_modules/apollo-client/node_modules/@types/graphql/language/ast").DocumentNode'.
      Types of property 'loc' are incompatible.
        Type 'import("/Users/bbugh/projects/project-name/develop/node_modules/@types/graphql/language/ast").Location | undefined' is not assignable to type 'import("/Users/bbugh/projects/project-name/develop/node_modules/apollo-client/node_modules/@types/graphql/language/ast").Location | undefined'.
          Type 'import("/Users/bbugh/projects/project-name/develop/node_modules/@types/graphql/language/ast").Location' is not assignable to type 'import("/Users/bbugh/projects/project-name/develop/node_modules/apollo-client/node_modules/@types/graphql/language/ast").Location'.
            Types of property 'startToken' are incompatible.
              Type 'import("/Users/bbugh/projects/project-name/develop/node_modules/@types/graphql/language/ast").Token' is not assignable to type 'import("/Users/bbugh/projects/project-name/develop/node_modules/apollo-client/node_modules/@types/graphql/language/ast").Token'.
                Types of property 'kind' are incompatible.
                  Type '"<SOF>" | "<EOF>" | "!" | "$" | "(" | ")" | "..." | ":" | "=" | "@" | "[" | "]" | "{" | "|" | "}" | "Name" | "Int" | "Float" | "String" | "BlockString" | "Comment" | "&"' is not assignable to type 'TokenKind'.
                    Type '"&"' is not assignable to type 'TokenKind'.

ERROR in /Users/bbugh/projects/project-name/develop/node_modules/vue-apollo/types/options.d.ts
ERROR in /Users/bbugh/projects/project-name/develop/node_modules/vue-apollo/types/options.d.ts(53,18):
TS2430: Interface 'VueApolloSubscriptionOptions<V, R>' incorrectly extends interface 'SubscriptionOptions<OperationVariables>'.
  Types of property 'query' are incompatible.
    Type 'import("/Users/bbugh/projects/project-name/develop/node_modules/@types/graphql/language/ast").DocumentNode' is not assignable to type 'import("/Users/bbugh/projects/project-name/develop/node_modules/apollo-client/node_modules/@types/graphql/language/ast").DocumentNode'.

The ExecutionResult errors may be related to https://github.com/apollographql/apollo-link/issues/910, but the VueApolloSubscriptionOptions<V, R> are in vue-apollo.

[lucasrrt]

Same errors here:

ERROR in /xxxxx/node_modules/vue-apollo/types/options.d.ts
47:18 Interface 'VueApolloMutationOptions<V, R>' incorrectly extends interface 'MutationOptions<R, OperationVariables>'.
  Types of property 'optimisticResponse' are incompatible.
    Type 'Object | ((this: ApolloVueThisType<V>) => any) | undefined' is not assignable to type 'R | ((vars: OperationVariables) => R) | undefined'.
      Type 'Object' is not assignable to type 'R | ((vars: OperationVariables) => R) | undefined'.
        The 'Object' type is assignable to very few other types. Did you mean to use the 'any' type instead?
          Type 'Object' is not assignable to type 'R'.
            The 'Object' type is assignable to very few other types. Did you mean to use the 'any' type instead?
    45 | }
    46 | 
  > 47 | export interface VueApolloMutationOptions<V, R> extends MutationOptions<R> {
       |                  ^
    48 |   mutation: DocumentNode;
    49 |   variables?: VariableFn<V>;
    50 |   optimisticResponse?: ((this: ApolloVueThisType<V>) => any) | Object;

@bbugh what did you do to bypass this?

[glen-84]

I'm seeing the same as @lucasrrt after updating apollo-boost.

Interface VueApolloMutationOptions has:

optimisticResponse?: ((this: ApolloVueThisType<V>) => any) | Object;

Interface MutationBaseOptions has:

optimisticResponse?: T | ((vars: TVariables) => T);

And they are not compatible.

[nurkkala]

I'm sure this is not the proper way to address this issue, but the following change in VueApolloMutationOptions (in types/options.d.ts) works around the error.

optimisticResponse?: ((this: ApolloVueThisType<V>) => any) | any;

[fvllam]

Changing the type declaration from Object to any temporarily gets past this error for me:
From

optimisticResponse?: ((this: ApolloVueThisType<V>) => any) | Object;

To

  optimisticResponse?: ((this: ApolloVueThisType<V>) => any) | any

[nurkkala]

With that error quieted, how does one make use of vue.d.ts? I can't get VS Code to recognize things like $apollo, etc.

[fvllam]

With that error quieted, how does one make use of vue.d.ts? I can't get VS Code to recognize things like $apollo, etc.

this.$apollo works for me :P Try removing the import VueApollo from 'vue-apollo'; statement and re-typing it back, autocompleting the module name. It worked for the same problem with a different module.

[nurkkala]

It turned out that I was using a VS Code workspace that contained the source tree in which I'm using vue-apollo. Somehow the tsconfig in the source tree wasn't properly being recognized by tsserver. When I reopened just the source tree (no workspace), it started working. So I have a workaround, but if anyone has insight into why VS Code behaves this way (or maybe how I misconfigured it!), I'd be glad to hear it.

[lucasrrt]

I'm sure this is not the proper way to address this issue, but the following change in VueApolloMutationOptions (in types/options.d.ts) works around the error.
optimisticResponse?: ((this: ApolloVueThisType) => any) | any;

This is actually a bad thing to do, but we can:
1) Open a issue requesting this change or
2) Make a fork of the this project, make this change, deploy it and use this version on your Vue project

[JohannesLamberts]

I got around the compilation error by creating a types.d.ts file in my project overriding the vue-apollo types:

import { MutationOptions } from 'apollo-client'
import { ApolloVueThisType } from 'vue-apollo/types/options'

declare module 'vue-apollo' {
  export interface VueApolloMutationOptions<V, R> extends MutationOptions<R> {
    optimisticResponse?: ((this: ApolloVueThisType<V>) => R) | R
  }
}

[sgarner]

Another solution to work around broken builds is to install the linked PR #627 by changing the dependency in your package.json to:

{
  "dependencies": {
    "vue-apollo": "github:Akryum/vue-apollo#pull/627/head"
  }
}

[glen-84]

@Akryum This issue should probably be closed now.

[Akryum]

Yes! :smile_cat: