typescript-urql-graphcache: Property '__typename' is missing in type 'DataFields'

[nephix]

trafficstars

Which packages are impacted by your issue?

No response

Describe the bug

When using @graphql-codegen/typescript-urql-graphcache at version ^3.1.0 the resulting types aren't compatible with urql's cacheExchange types.

It seems to work with an older version of @graphql-codegen/typescript-urql-graphcache though, like ^2.4.0

Your Example Website or App

Sorry, can't really provide one

Steps to Reproduce the Bug or Issue

Generated admin type:

export type Admin = {
  __typename?: 'Admin';
  email: Scalars['String']['output'];
  ...
};

Generated GraphCacheUpdaters:

export type GraphCacheUpdaters = {
  Query?: {
    currentAdmin?: GraphCacheUpdateResolver<
      { currentAdmin: Maybe<WithTypename<Admin>> },
      Record<string, never>
    >;
    ...
  }
}

urql cacheExchange:

import type {
  GraphCacheKeysConfig,
  GraphCacheOptimisticUpdaters,
  GraphCacheResolvers,
  GraphCacheUpdaters,
} from 'schema';

const cache = cacheExchange<{
    updates?: GraphCacheUpdaters;
    keys?: GraphCacheKeysConfig;
    optimistic?: GraphCacheOptimisticUpdaters;
    resolvers?: GraphCacheResolvers;
    schema: IntrospectionQuery;
  }>({ ... });

Error message:

Type '{ updates?: GraphCacheUpdaters | undefined; keys?: GraphCacheKeysConfig | undefined; optimistic?: GraphCacheOptimisticUpdaters | undefined; resolvers?: GraphCacheResolvers | undefined; schema: IntrospectionQuery; }' does not satisfy the constraint 'Partial<CacheExchangeOpts>'.
  Types of property 'updates' are incompatible.
    Type 'GraphCacheUpdaters | undefined' is not assignable to type 'UpdatesConfig | undefined'.
      Type 'GraphCacheUpdaters' is not assignable to type 'UpdatesConfig'.
        Property 'Admin' is incompatible with index signature.
          Type '{ createdAt?: UpdateResolver<Maybe<WithTypename<Admin>>, Record<string, never>> | undefined; email?: UpdateResolver<Maybe<WithTypename<Admin>>, Record<...>> | undefined; ... 6 more ...; verifiedAt?: UpdateResolver<...> | undefined; }' is not assignable to type 'void | { [fieldName: string]: void | ((parent: DataFields, args: Variables, cache: Cache, info: ResolveInfo) => void); }'.
            Type '{ createdAt?: UpdateResolver<Maybe<WithTypename<Admin>>, Record<string, never>> | undefined; email?: UpdateResolver<Maybe<WithTypename<Admin>>, Record<...>> | undefined; ... 6 more ...; verifiedAt?: UpdateResolver<...> | undefined; }' is not assignable to type '{ [fieldName: string]: void | ((parent: DataFields, args: Variables, cache: Cache, info: ResolveInfo) => void); }'.
              Property 'createdAt' is incompatible with index signature.
                Type 'UpdateResolver<Maybe<WithTypename<Admin>>, Record<string, never>>' is not assignable to type 'void | ((parent: DataFields, args: Variables, cache: Cache, info: ResolveInfo) => void)'.
                  Type 'UpdateResolver<Maybe<WithTypename<Admin>>, Record<string, never>>' is not assignable to type '(parent: DataFields, args: Variables, cache: Cache, info: ResolveInfo) => void'.
                    Types of parameters 'parent' and 'parent' are incompatible.
                      Type 'DataFields' is not assignable to type 'Maybe<WithTypename<Admin>>'.
                        Property '__typename' is missing in type 'DataFields' but required in type '{ __typename: "Admin"; }'.

Expected behavior

No type errors

Screenshots or Videos

No response

Platform

• OS: macOS
• NodeJS: v20
• graphql version: ^16.8.1
• @graphql-codegen/* version(s):

"@graphql-codegen/cli": "^5.0.0",
"@graphql-codegen/client-preset": "4.1.0",
"@graphql-codegen/typescript-urql-graphcache": "^3.1.0",
"@graphql-codegen/urql-introspection": "^3.0.0",

Codegen Config File

import type { CodegenConfig } from '@graphql-codegen/cli';

const config: CodegenConfig = {
  overwrite: true,
  schema: 'http://127.0.0.1:8080/graphql',
  documents: ['packages/common/data/**/*.ts'],
  generates: {
    'packages/common/data/schema.introspection.ts': {
      plugins: ['urql-introspection'],
      config: {
        useTypeImports: true,
        includeScalars: true,
        includeEnums: true,
        includeInputs: true,
        includeDirectives: true,
      },
    },
    'packages/common/data/schema.ts': {
      plugins: ['typescript', 'typescript-urql-graphcache'],
    },
    'packages/common/data/gql/': {
      preset: 'client',
      presetConfig: {
        fragmentMasking: { unmaskFunctionName: 'getFragmentData' },
      },
    },
  },
  hooks: { afterAllFileWrite: ['prettier --write', 'eslint --fix'] },
};

export default config;

Additional context

No response

[markcruz389]

Hi, I've faced the same issue, is there a workaround for this?

[nephix]

My workaround was to use v2.4.0

[bppdddqqqq]

That's not a workaround, it's a mitigation of an issue. There is already a version existing.

Ensure you have these configs enabled:

'./generated/urql/cache.ts': {
      plugins: [
        'typescript',
        'typescript-urql-graphcache',
      ],
      config: {
        offlineExchange: true,
        nonOptionalTypename: true,
        skipTypename: false,
      }
    },

It seems skipTypename is implicitly set to true :). You're welcome