type generation breaks on @graphql-codegen/typescript-react-apollo@2.2.1

[lauromueller]

Before describing the bug, let me just drop a big "thank you" for this code generator. Saves a lot of time and headache when managing our React + Apollo app 🙂

Describe the bug

We currently use @graphql-codegen/typescript-react-apollo@2.1.1 to generate graphql types and helper hooks for the Apollo Client serving our application. So far everything is working fine, however, when trying to update to version 2.2.1, the generated types start to contain several [object Object] instances.

More precisely, this happens within generated Pick<...> types. For example, suppose I have the following type definition:

type MyType {
  myFirstField: String;
  mySecondField: String;
}

extend type Query {
  myObject: MyType
}

query getMyTypeFirstField {
  myObject {
    myFirstField
  }
}

Then the result of running the generator outputs a broken type definition:

export type MyTypeFields = Maybe<{ __typename: 'MyType' } & Pick<MyType, '[object Object]'>>

The expected output would be:

export type MyTypeFields = Maybe<{ __typename: 'MyType' } & Pick<MyType, 'myFirstField'>>

My guess is that this is related to #5104, as the definitions for MakeOptional were updated and MakeMaybe was introduced.

My codegen.yml config file:

overwrite: true
hooks:
  afterAllFileWrite:
    - "yarn prettier:fix"
schema:
  - "src/types/cache/cacheTypeDefs.ts"
documents:
  - "src/**/*.ts"
generates:
  src/types/generated/cacheTypes.tsx:
    plugins:
      - "typescript"
      - "typescript-operations"
      - "typescript-react-apollo"
  ./graphql.schema.json:
    plugins:
      - "introspection"

[ardatan]

Could you create a minimal reproduction on CodeSandbox? Thanks!

[dotansimha]

@lauromueller can you please try to update all codegen related to latest? we had a different issue a few days ago. We tried to prevent this, but in some cases when you upgrade only some of the codegne packages, you get duplicates in common packages, leading to this kind of issues.

[lauromueller]

Thanks for the quick reply. Here is a basic reproduction (I just updated the package.json file to use the package versions we are currently using and the codegen.yml file to include the typescript-react-apollo plugin):

https://codesandbox.io/s/bold-yonath-yqmst

And the specific part of the code:

export type UserQuery = (
  { __typename?: 'Query' }
  & { user: (
    { __typename?: 'User' }
    & Pick<User, '[object Object]' | '[object Object]' | '[object Object]'>
  ) }
);

[lauromueller]

@dotansimha updating all the packages solves the problem, so I'm closing this issue. Thanks!