(graphcache): type missmatch between graphql-code-generator and graphcache

[dargmuesli]

Describe the bug

I hit the same issue as in https://github.com/FormidableLabs/urql/discussions/1654 again. I use

{
    "@urql/core": "2.6.1",
    "@urql/exchange-graphcache": "4.4.3",
    "@urql/vue": "0.6.4",
    "@graphql-codegen/cli": "2.11.5",
    "@graphql-codegen/typescript": "2.7.3",
    "@graphql-codegen/typescript-operations": "2.5.3",
    "@graphql-codegen/typescript-urql-graphcache": "2.3.3",
    "@graphql-codegen/typescript-vue-urql": "2.3.3",
    "@graphql-codegen/urql-introspection": "2.2.1"
}

The exact error:

plugins/urql.ts:68:31 - error TS2345: Argument of type 'GraphCacheConfig' is not assignable to parameter of type 'Partial<CacheExchangeOpts>'.
  Types of property 'updates' are incompatible.
    Type 'GraphCacheUpdaters | undefined' is not assignable to type 'Partial<UpdatesConfig> | undefined'.
      Type 'GraphCacheUpdaters' is not assignable to type 'Partial<UpdatesConfig>'.
        Types of property 'Mutation' are incompatible.
          Type '{ accountDelete?: ((parent: { accountDelete: Maybe<WithTypename<AccountDeletePayload>>; }, args: MutationAccountDeleteArgs, cache: Cache, info: ResolveInfo) => void) | undefined; ... 66 more ...; uploadCreate?: ((parent: { ...; }, args: MutationUploadCreateArgs, cache: Cache, info: ResolveInfo) => void) | undefined;...' is not assignable to type '{ [fieldName: string]: (parent: DataFields, args: Variables, cache: Cache, info: ResolveInfo) => void; } | undefined'.
            Type '{ accountDelete?: ((parent: { accountDelete: Maybe<WithTypename<AccountDeletePayload>>; }, args: MutationAccountDeleteArgs, cache: Cache, info: ResolveInfo) => void) | undefined; ... 66 more ...; uploadCreate?: ((parent: { ...; }, args: MutationUploadCreateArgs, cache: Cache, info: ResolveInfo) => void) | undefined; }' is not assignable to type '{ [fieldName: string]: (parent: DataFields, args: Variables, cache: Cache, info: ResolveInfo) => void; }'.
              Property 'accountDelete' is incompatible with index signature.
                Type '(parent: { accountDelete: Maybe<WithTypename<AccountDeletePayload>>; }, args: MutationAccountDeleteArgs, cache: Cache, info: ResolveInfo) => void' is not assignable to type '(parent: DataFields, args: Variables, cache: Cache, info: ResolveInfo) => void'.
                  Types of parameters 'parent' and 'parent' are incompatible.
                    Property 'accountDelete' is missing in type 'DataFields' but required in type '{ accountDelete: Maybe<WithTypename<AccountDeletePayload>>; }'.

68   const cache = cacheExchange(cacheConfig)

Should I post more details here or to @graphql-codegen?

Reproduction

https://github.com/maevsi/maevsi/runs/7967037590?check_suite_focus=true#step:5:1647

Urql version

2.6.1 as well as 3.0.1

Validations

• [X] I can confirm that this is a bug report, and not a feature request, RFC, question, or discussion, for which GitHub Discussions should be used
• [X] Read the docs.
• [X] Follow our Code of Conduct

[JoviDeCroock]

Have you tries running a dedupe command? Sometimes package managers start creating duplicate versions which can lead to this

[dargmuesli]

Dedupe command of what? Duplicate versions of what? Shall I reinstall node_modules or recreate the lockfile?

[JoviDeCroock]

Something like https://www.npmjs.com/package/pnpm-deduplicate package has not a lot of downloads for npm and yarn this is built-in 😅

Might be related https://github.com/pnpm/pnpm/issues/3517

[JoviDeCroock]

@kitten looked at your code and pointed rightfully out that you are using the generic wrong here https://github.com/maevsi/maevsi/blob/8f6eedd191ce08a950d92cac1f94c0cebd6d5cb6/nuxt/plugins/urql.ts#L66

  const cache = cacheExchange<GraphCacheConfig>(cacheConfig)

should do the trick

[dargmuesli]

Thank you for your suggestions and looking into the code! Sadly, pnpm-deduplicate reports no duplicates and adding the generic just moves eslint's red squiggly line from (cacheConfig) to <GraphCacheConfig>. Any other ideas? Should I post/link other source files as well?

[JoviDeCroock]

Hmm this is kind off weird, I just tried this config in one of my own projects where we have similar fields where parent resolves to a non-nullable field but for some reason it isn't erroring out there, looking a bit deeper but this could be a TypeScript version/config issue

EDIT: we are using the same typescript version - a minimal reproduction would help here (ts playground/...) 😅 could also be that the gql-codegen folks have experience with this type of issue CC @dotansimha

[dargmuesli]

I do not face this issue anymore currently.