🐛 BUG: Type mismatch typescript-operations and typescript-vue-apollo

[sschneider-ihre-pvs]

Describe the bug

When I try to generate vue-apollo operations I get errors on the variables type that there is a mismatch.

Your Example Website or App

https://www.typescriptlang.org/play?ssl=16&ssc=1&pln=15&pc=99#code/JYWwDg9gTgLgBDAnmApnA3nASigZnAXzlyghDgHIA3AVxQFoATFEYCgbgFgAoFAD0iw4zAMYAbAIZQ0SVNhQSRMYFRQAxGgDslwCJoA8AFQAKUiSAB8cALxwAFAEobVk2ZBduPfoPiy0AUT5FGCM4fhgUTUYAZww4AG0AaxREAC44aJgoYE0AcwBddK1EzQgAd01CK1tMeIBpOBy4ZMQIfENCuEN6-MIPb2hfZACARxoJMWijABo4AGVqngBIeI6wvgio2Pi53oB+e2WV3fXNmIS1g6y6OHTcCeiUZac7h6fuDx4-Rs0wGngajw4D8-jAipoSuVNDwCDwvsM4AA1KTACQAIzEKGipig5hQESgRmR2XRmOi1S6xNRGKxcAAPvJcESUaSsVYGThgip1FodHpmSSaeTPp5uN8IpkbHB-GMHvoqazsW58ShCYFgvocqCLBZZuqlJrfv92Yz9PqQlrjSbOTpVBptMp+ebDdqdTwAPTu4FwAB6B1s13eQA

Steps to Reproduce the Bug or Issue

1. Run codegen
2. Check generated operations

Expected behavior

The type used for variables should match in typescript operations and vue operations.

Screenshots or Videos

Argument of type
'Exact<{
  input?: InputMaybe<INPUTTYPE> | undefined; }> |
  Ref<Exact<{ input?: InputMaybe<INPUTTYPE> | undefined; }>> |
  ReactiveFunction<Exact<{ input?: InputMaybe<INPUTTYPE> | undefined; }>>
' is not assignable to parameter of type 
'VariablesParameter<
  Exact<{
    input?: InputMaybe<INPUTTYPE> | undefined; }>>
'.

Argument of type
'Exact<{
  input: INPUTTYPE; }> |
  Ref<Exact<{ input: INPUTTYPE; }>> |
  ReactiveFunction<Exact<{ input: INPUTTYPE; }>>
' is not assignable to parameter of type 
'VariablesParameter<
  Exact<{
    input: INPUTTYPE; }>>
'.

Platform

• OS: Windows 10
• NodeJS@16.14.2
• graphql@16.6.0
• @graphql-codegen/cli@2.13.1
• typescript@ 4.8.4

Codegen Config File

overwrite: true
schema: <schemalocation>
documents: <documentslocation>
generates:
  ./libs/shared/__generated__/src/lib/types.generated.ts:
    plugins:
      - 'typescript'
    config:
      scalars:
        BigInt: bigint
      typesPrefix: 'I'
      withCompositionFunctions: true
      federation: true

  ./libs/shared/__generated__/src/lib/operations.generated.ts:
    preset: 'import-types'
    plugins:
      - 'typescript-operations'
    config:
      dedupeOperationSuffix: true
      dedupeFragments: true
      gqlImport: '@apollo/client/core#gql'
      federation: true
      typesPrefix: I
      useTypeImports: true
    presetConfig:
      typesPath: ./types.generated

  ./libs/shared/__generated__/src/lib/use-graphql-operations.generated.ts:
    preset: 'import-types'
    plugins:
      - 'typescript-vue-apollo'
    config:
      vueCompositionApiImportFrom: vue
      dedupeOperationSuffix: true
      dedupeFragments: true
      typesPrefix: I
      gqlImport: '@apollo/client/core#gql'
      federation: true
      useTypeImports: true
      importOperationTypesFrom: Types
    presetConfig:
      typesPath: ./operations.generated
hooks:
  afterAllFileWrite:
    - prettier --write
    - eslint --fix

Additional context

No response

[sschneider-ihre-pvs]

???

[charlypoly]

Hi @sschneider-ihre-pvs,

could you provide a minimal reproduction on CodeSandbox, Stackblitz, or GitHub of your codegen setup? The issue might be that the plugin is not compatible with your current version of Vue Apollo.

[sschneider-ihre-pvs]

It might be the case that the main problem is that is depends on the environment. The example above is from the online playground and from vscode. I seem to have missedited some comments since the description is lost. but the white one is the playground with the link above and the black one is my vscode. both use the same typescript version but they do not agree on the types being equal.