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