gql-tag-operations-preset with @graphql-codegen/relay-operation-optimizer

[PatrykWalach]

I'm trying to use gql-tag-operations-preset to get fragment masking, with @graphql-codegen/relay-operation-optimizer to get fragments arguments.

const documents = {
    "query AiringSchedulesQuery($airingAt_greater: Int, $airingAt_lesser: Int, $page: Int) { Page(page: $page) { pageInfo { hasNextPage currentPage } airingSchedules( airingAt_greater: $airingAt_greater airingAt_lesser: $airingAt_lesser sort: TIME ) { id ...Media_media airingAt media { id mediaListEntry { id status } } } } } ": graphql.AiringSchedulesQueryDocument,
    "mutation MediaMutation($id: Int!, $progress: Int!) {   SaveMediaListEntry(id: $id, progress: $progress) {     id     progress   } }": graphql.MediaMutationDocument,
    "fragment Media_media on AiringSchedule { id ...MediaListItem_media @arguments(score: POINT_100) media { coverImage { large extraLarge medium color } nextAiringEpisode { id episode } episodes mediaListEntry { progress id } id } } ": graphql.Media_MediaFragmentDoc,
    "fragment MediaListItem_media on AiringSchedule @argumentDefinitions(score: { type: \"ScoreFormat\" }) { id timeUntilAiring airingAt episode media { id episodes mediaListEntry { id score(format: $score) progress } title { userPreferred } nextAiringEpisode { id episode } } } ": graphql.MediaListItem_MediaFragmentDoc,
    "query indexQuery {   Viewer {     id     name   } }": graphql.IndexQueryDocument,
};

Because flattenGeneratedTypes: true the fragments graphql.Media_MediaFragmentDoc and graphql.MediaListItem_MediaFragmentDoc are missing.

How can I generate these fragments when flattenGeneratedTypes: true?

    generates:
      ./src/lib/generated/:
        preset: gql-tag-operations-preset
        presetConfig:
          fragmentMasking: true
        config:
          skipDocumentsValidation: true
          flattenGeneratedTypes: true

[PatrykWalach]

Setting flattenGeneratedTypesIncludeFragments: true does generate types for fragments.
The fragment with arguments is generated with a hash
export const MediaListItem_Media_KwQlaFragmentDoc =

typed-document-node/index.ts:18
Passing flattenGeneratedTypesIncludeFragments: true inside typed-document-node plugin does help to generate these fragments

const documents = config.flattenGeneratedTypes ? optimizeOperations(schema, rawDocuments, {
        includeFragments: config.flattenGeneratedTypesIncludeFragments
    }) : rawDocuments;

The change above is something that may be worth adding, but it's not a solution, since if we had more than one fragment with a hash, gql function wouldn't know which one to return.

But since parsed fragments are not used at runtime the solution seems to be modifying the preset so that the gql function is overloaded to return an union

export function gql(source: "..."): MediaListItem_Media_KwQlaFragmentDoc | MediaListItem_Media_JHAfaFragmentDoc

and then with useFragment choose a correct type

[PatrykWalach]

After doing the above I noticed, that, regardless of the arguments, the type of fragment should be the same, so it's kind of silly to generate types for every one of them.
So I reverted all the changes and simply made sure optimizeOperations would return original fragments as well which fixed all of my issues, but now my query type, had no ' $fragmentRefs', so I just gave up and opt out of masking.

This allowed me to get masking, and relay optimization

    config:
      skipDocumentsValidation: true
    generates:
      ./src/lib/graphql/index.ts:
          - typescript:
          - typescript-operations:
              inlineFragmentTypes: mask
          - typed-document-node:
              flattenGeneratedTypes: true