Issue when migrating from @graphql-codegen/cli v1 to v5

[KarineBrandelli]

Which packages are impacted by your issue?

@graphql-codegen/cli

Describe the bug

I'm migrating from v1 to v5 of @graphql-codegen/cli. I'm using a react + webpack + typescript application, with graphql and apollo. Here's the versions:

"@apollo/client": "3.8.8",
"graphql": "14.5.7",
"react": "17.0.2",
"typescript": "4.7.4",

When migration from v1 to v5, the generated file does not 'obey' the rules as it was set on the v1.

Here's the v1 versions, config file and output:

package.json

        "@graphql-codegen/cli": "1.7.0",
        "@graphql-codegen/fragment-matcher": "1.12.2",
        "@graphql-codegen/typescript": "1.7.0",
        "@graphql-codegen/typescript-operations": "1.7.0",

codegen.yml

schema:
    - http://localhost:8080/graphql
pluckConfig:
  modules:
    - name: "apollo-boost"
      identifier: "gql" # if you import using destruct
generates:
  src/types/index.ts:
    documents:
      - ./src/graphql/queries/*.ts
      - ./src/graphql/mutations/*.ts
      - ./src/graphql/fragments/*.ts
      - '!./src/graphql/queries/filters.ts'
      - '!./src/graphql/mutations/filters.ts'
      - ./@core/graphql/queries/*.ts
      - ./@core/graphql/mutations/*.ts
      - '!./@core/graphql/queries/notification.ts'
      - '!./@core/graphql/queries/sidebar.ts'
      - '!./@core/graphql/queries/subheader.ts'
      - '!./@core/graphql/mutations/notification.ts'
      - '!./@core/graphql/mutations/sidebar.ts'
      - '!./@core/graphql/mutations/subheader.ts'
    plugins:
      - typescript
      - typescript-operations
config:
  typesPrefix: T
  skipTypename: true
  namingConvention: change-case#pascalCase
  scalars:
    DateTime: Date
    JSON: object
    Upload: File

correct output

export enum TOrthoRaterValueEnum {  // it adds the 'T' in front of the enum CORRECTLY
  Ten = 'Ten',
  Twenty = 'Twenty',
  Thirty = 'Thirty',
  Fourty = 'Fourty',
  Fifty = 'Fifty',
  Sixty = 'Sixty',
  Seventy = 'Seventy',
  Eighty = 'Eighty',
  Ninety = 'Ninety',
  OnHundred = 'OnHundred'
}

export type TResultExamOrthoRaterForComparative = {
  date: Scalars['DateTime'],
  farLeftEye?: Maybe<TOrthoRaterValueEnum>, // KEEPS THE SAME NAME AS THE ENUM ABOVE
  farRightEye?: Maybe<TOrthoRaterValueEnum>,
  farBothEyes?: Maybe<TOrthoRaterValueEnum>,
  closeLeftEye?: Maybe<TOrthoRaterValueEnum>,
  closeRightEye?: Maybe<TOrthoRaterValueEnum>,
  closeBothEyes?: Maybe<TOrthoRaterValueEnum>,
  farLateralPhoria?: Maybe<TPhoriaEnum>,
  farVerticalPhoria?: Maybe<TPhoriaEnum>,
  closeLateralPhoria?: Maybe<TPhoriaEnum>,
  closeVerticalPhoria?: Maybe<TPhoriaEnum>,
};

Here's the v5 versions, config file and wrong output:

package.json

        "@graphql-codegen/cli": "5.0.2",
        "@graphql-codegen/fragment-matcher": "5.0.2",
        "@graphql-codegen/typescript": "4.0.9",
        "@graphql-codegen/typescript-operations": "4.2.3",

codegen.yml

schema:
    - http://localhost:8080/graphql
pluckConfig:
  modules:
    - name: "apollo-boost"
      identifier: "gql" # if you import using destruct
generates:
  src/types/index.ts:
    documents:
      - ./src/graphql/queries/*.ts
      - ./src/graphql/mutations/*.ts
      - ./src/graphql/fragments/*.ts
      - '!./src/graphql/queries/filters.ts'
      - '!./src/graphql/mutations/filters.ts'
      - ./@core/graphql/queries/*.ts
      - ./@core/graphql/mutations/*.ts
      - '!./@core/graphql/queries/notification.ts'
      - '!./@core/graphql/queries/sidebar.ts'
      - '!./@core/graphql/queries/subheader.ts'
      - '!./@core/graphql/mutations/notification.ts'
      - '!./@core/graphql/mutations/sidebar.ts'
      - '!./@core/graphql/mutations/subheader.ts'
    plugins:
      - typescript
      - typescript-operations
config:
  typesPrefix: T
  skipTypename: true
  namingConvention: change-case-all#pascalCase
  scalars:
    DateTime: Date
    JSON: object
    Upload: File

wrong output

export enum TOrthoRaterValueEnum { // it adds the 'T' in front of the enum CORRECTLY
  Eighty = 'Eighty',
  Fifty = 'Fifty',
  Fourty = 'Fourty',
  Ninety = 'Ninety',
  OnHundred = 'OnHundred',
  Seventy = 'Seventy',
  Sixty = 'Sixty',
  Ten = 'Ten',
  Thirty = 'Thirty',
  Twenty = 'Twenty'
}

export type TResultExamOrthoRaterForComparative = {
  closeBothEyes?: Maybe<OrthoRaterValueEnum>; // but when it uses here, doesn't add the 'T', generating error
  closeLateralPhoria?: Maybe<PhoriaEnum>;
  closeLeftEye?: Maybe<OrthoRaterValueEnum>;
  closeRightEye?: Maybe<OrthoRaterValueEnum>;
};

Your Example Website or App

don't have, is a company private repo

Steps to Reproduce the Bug or Issue

don't have, is a company private repo

Expected behavior

When updating to v5, I expect the enums keep the 'T' when used.

Screenshots or Videos

No response

Platform

• OS: [Linux]
• NodeJS: [20.15.0]
• graphql version: [14.5.7]
• @graphql-codegen/* version(s): [ before: "@graphql-codegen/cli": "1.7.0", "@graphql-codegen/fragment-matcher": "1.12.2", "@graphql-codegen/typescript": "1.7.0", "@graphql-codegen/typescript-operations": "1.7.0",

after: "@graphql-codegen/cli": "5.0.2", "@graphql-codegen/fragment-matcher": "5.0.2", "@graphql-codegen/typescript": "4.0.9", "@graphql-codegen/typescript-operations": "4.2.3", ]

Codegen Config File

schema:
    - http://localhost:8080/graphql
pluckConfig:
  modules:
    - name: "apollo-boost"
      identifier: "gql" # if you import using destruct
generates:
  src/types/index.ts:
    documents:
      - ./src/graphql/queries/*.ts
      - ./src/graphql/mutations/*.ts
      - ./src/graphql/fragments/*.ts
      - '!./src/graphql/queries/filters.ts'
      - '!./src/graphql/mutations/filters.ts'
      - ./@core/graphql/queries/*.ts
      - ./@core/graphql/mutations/*.ts
      - '!./@core/graphql/queries/notification.ts'
      - '!./@core/graphql/queries/sidebar.ts'
      - '!./@core/graphql/queries/subheader.ts'
      - '!./@core/graphql/mutations/notification.ts'
      - '!./@core/graphql/mutations/sidebar.ts'
      - '!./@core/graphql/mutations/subheader.ts'
    plugins:
      - typescript
      - typescript-operations
config:
  typesPrefix: T
  skipTypename: true
  namingConvention: change-case#pascalCase
  scalars:
    DateTime: Date
    JSON: object
    Upload: File

Additional context

No response

[ardatan]

You are migrating to a new major version so according to SemVer it is expected to have breaking changes during this process. In other words, you cannot expect the same output when you migrate to a major version. In your case it is even more... There are 4 major releases in between v1 and v5. For sure, there would be bunch of changes in the output and also in the configuration.

I'd suggest you to check the migration guides and changelogs between each major version to see the breaking changes and the steps you should take. If a feature is missing or the alternative feature/configuration for the newer version doesn't work as expected, feel free to create an issue but I don't think we can't help you much further at this point.

[KarineBrandelli]

@ardatan I've checked the changelogs and the migrations guide. Unfortunally, both of them are lacking information.

The changelogs are confusing and the migrations guides only support the migrations below:

So if you have any other suggestions, I'm happy to hear it 😃

[saihaj]

codegen is really just about config. I would just start with a new config file by reading the latest docs. The defaults have changed a lot in various versions. So would need to see config per plugin