Aliased fields with `@include`/`@skip` are treated as mandatory

[RadovanBednar]

Which packages are impacted by your issue?

@graphql-codegen/typescript

Describe the bug

Since #3836 fields adorned with @include or @skip directives are correctly treated as optional:

query getUsers($includeName: Boolean!) {
  users {
    id
    name @include(if: $includeName)
  }
}

becomes

export type GetUsersQuery = (
  { users: Array<(
    { id: string, name?: string }
    & { __typename?: 'User' }
  )> }
  & { __typename?: 'Query' }
);

However, when the conditional field is aliased, it's treated as mandatory:

query getUsers($includeName: Boolean!) {
  users {
    id
    userName: name @include(if: $includeName)
  }
}

becomes

export type GetUsersQuery = (
  { users: Array<(
    { id: string, userName: string } // no question mark in sight
    & { __typename?: 'User' }
  )> }
  & { __typename?: 'Query' }
);

Your Example Website or App

Steps to Reproduce the Bug or Issue

Alias a conditional field (i.e. one with @include or @skip directive). It's no longer treated as optional in the generated type.

Expected behavior

Fields adorned with @include or @skip should be treated as optional in the generated type, even if they are aliased.

Screenshots or Videos

No response

Platform

-

Codegen Config File

No response

Additional context

No response

[Urigo]

Thank you for reporting @RadovanBednar !
Seems like a real issue

I'm labeling it according to our new Contribution Guide and issue flow as a stage 0 issue

Now in order to advance to stage 1 we'll need a simple reproduction, maybe in code-sandbox?

Later to progress to stage 2, a failing test would be needed - you can also start directly from that
Thanks for the report!

[FlorianVenturini]

Hello !

I found that this issue is still open, and since I faced it in my codebase too I managed to reproduce it in this sandbox 😄
As you can see in the document.graphql file, I added a @skip directive on both email and eml (which is email, but aliased).
We can see that in the types.ts file we have email that is optional (as intended), but eml is shown as mandatory.

Is that helpful enough or do you need more infos @Urigo ?

Thanks, and have a good day!

[yasamoka]

I have a similar issue but with fragments instead:

...Fragment @include(if: $condition) {
    field
}

Does not make field optional.

However, I just found a workaround after looking at relevant tests in the codebase:

...@include(if: $condition) {
    ...Fragment {
        field
    }
}

Works fine and seems to have the expected behavior otherwise.

Unfortunately, it doesn't work for aliased fields:

...@include(if: $condition) {
    alias: field
}

[anton-amelekhin-veeva]

I can confirm the issue with fragments with "@graphql-codegen/typescript-operations": "^4.2.1". @yasamoka thanks for the workaround! Unfortunately, it didn't work in my case. The type is still the same.

[yasamoka]

I can confirm the issue with fragments with "@graphql-codegen/typescript-operations": "^4.2.1". @yasamoka thanks for the workaround! Unfortunately, it didn't work in my case. The type is still the same.

Can you provide a minimal example so I can take a look?

[Sam-Persoon]

I am also running into this issue, with the latest version 5.0.7 in both cases below table.bar is marked as defined:

graphql(`
  query TestQuery($includeFoo: Boolean!, $includeBar: Boolean!) {
    table {
      field
      ...Foo @include(if: $includeFoo)
      ...Bar @include(if: $includeBar)
    }
  }

  fragment Foo on table {
    relation {
      id
    }
    foo
  }

  fragment Bar on table {
    bar
  }
`);


graphql(`
  query TestQuery($includeFoo: Boolean!, $includeBar: Boolean!) {
    table {
      field
      ...Foo @include(if: $includeFoo)
      ... @include(if: $includeBar) {
        ...Bar
      }
    }
  }

  fragment Foo on table {
    subcontractor_company {
      row_id
    }
    foo
  }

  fragment Bar on table {
    bar
  }
`);

If I however change it to

graphql(`
  query TestQuery($includeFoo: Boolean!, $includeBar: Boolean!) {
    table {
      field
      ...Foo @include(if: $includeFoo)
      bar @include(if: $includeBar)
    }
  }

  fragment Foo on table {
    subcontractor_company {
      row_id
    }
    foo
  }
`);

table.bar is marked as optional.

I am using the follow settings:

const config: CodegenConfig = {
  config: {
    namingConvention: {
      enumValues: "change-case-all#upperCase",
    },
    preResolveTypes: true,
    skipDocumentsValidation: {
      skipValidationAgainstSchema: true,
    },
    skipTypeNameForRoot: true,
  },
  documents: ["src/**/*.tsx", "src/**/*.ts", "!src/gql/**", "!src/**/*.graphql.ts"],
  generates: {
    "./src/gql/graphql.ts": {
      config: {
        skipTypename: true,
      },
      plugins: [
        "typescript",
      ],
      presetConfig: {
        fragmentMasking: false,
      },
    },
    "src/": {
      config: {
        skipTypename: true,
      },
      plugins: [
        "typescript-operations",
        "typed-document-node",
      ],
      preset: "near-operation-file",
      presetConfig: {
        baseTypesPath: "gql/graphql.ts",
        extension: ".graphql.ts",
        folder: "graphql",
      },
    },
  },
  noSilentErrors: true,
};

[eddeee888]

Thanks all, I'll look to include this in the next major version #10496

[eddeee888]

Hi everyone 👋

I've got alpha versions for this fix here. This is the version with the fix:

@graphql-codegen/typescript-operations@6.0.0-alpha-20260318141253-1a79eada98cda15027e7df66a926a34087158d4f

As usual, the GraphQL Codegen packages share some internals. So, if you explicitly install other GraphQL Codegen packages, please update them to the respective alpha version in the table when trying.

Please let me know if it doesn't work!

---

Note that this will be included in the latest version so typescript-operations works without typescript. More in the migration guide

The minimal config looks like this:

const config: CodegenConfig = {
  // ... your other options
  generates: {
    'src/types.generated.ts': {
      plugins: ['typescript-operations']
    }
  }
}