fix(typescript-operations): Generate $fragmentName for fragment su…

…btypes for fragment masking (#7813)

* Generate ` $fragmentName` for fragment subtypes for fragment masking

* Add changeset

* 🚮

Co-authored-by: Laurin Quast <laurinquast@googlemail.com>

* Add dev-test `gql-tag-operations-masking-star-wars` for complex usecases

Co-authored-by: Laurin Quast <laurinquast@googlemail.com>

.changeset/two-dolphins-deliver.md

@@ -0,0 +1,6 @@
+---
+'@graphql-codegen/visitor-plugin-common': patch
+'@graphql-codegen/typescript-operations': patch
+---
+
+Generate $fragmentName for fragment subtypes for fragment masking

dev-test/codegen.yml

@@ -417,3 +417,9 @@ generates:
     preset: gql-tag-operations-preset
     presetConfig:
       fragmentMasking: true
+  ./dev-test/gql-tag-operations-masking-star-wars/gql:
+    schema: ./dev-test/gql-tag-operations-masking-star-wars/schema.json
+    documents: './dev-test/gql-tag-operations-masking-star-wars/src/**/*.tsx'
+    preset: gql-tag-operations-preset
+    presetConfig:
+      fragmentMasking: true

dev-test/gql-tag-operations-masking-star-wars/gql/fragment-masking.ts

@@ -0,0 +1,19 @@
+import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
+
+export type FragmentType<TDocumentType extends DocumentNode<any, any>> = TDocumentType extends DocumentNode<
+  infer TType,
+  any
+>
+  ? TType extends { ' $fragmentName': infer TKey }
+    ? TKey extends string
+      ? { ' $fragmentRefs': { [key in TKey]: TType } }
+      : never
+    : never
+  : never;
+
+export function useFragment<TType>(
+  _documentNode: DocumentNode<TType, any>,
+  fragmentType: FragmentType<DocumentNode<TType, any>>
+): TType {
+  return fragmentType as any;
+}

dev-test/gql-tag-operations-masking-star-wars/gql/gql.ts

@@ -0,0 +1,29 @@
+/* eslint-disable */
+import * as graphql from './graphql';
+import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
+
+const documents = {
+  '\n  query HeroDetailsWithFragment($episode: Episode) {\n    hero(episode: $episode) {\n      ...HeroDetails\n    }\n  }\n':
+    graphql.HeroDetailsWithFragmentDocument,
+  '\n  fragment HeroDetails on Character {\n    __typename\n    name\n    ... on Human {\n      height\n    }\n    ... on Droid {\n      primaryFunction\n    }\n  }\n':
+    graphql.HeroDetailsFragmentDoc,
+};
+
+export function gql(
+  source: '\n  query HeroDetailsWithFragment($episode: Episode) {\n    hero(episode: $episode) {\n      ...HeroDetails\n    }\n  }\n'
+): typeof documents['\n  query HeroDetailsWithFragment($episode: Episode) {\n    hero(episode: $episode) {\n      ...HeroDetails\n    }\n  }\n'];
+export function gql(
+  source: '\n  fragment HeroDetails on Character {\n    __typename\n    name\n    ... on Human {\n      height\n    }\n    ... on Droid {\n      primaryFunction\n    }\n  }\n'
+): typeof documents['\n  fragment HeroDetails on Character {\n    __typename\n    name\n    ... on Human {\n      height\n    }\n    ... on Droid {\n      primaryFunction\n    }\n  }\n'];
+
+export function gql(source: string): unknown;
+export function gql(source: string) {
+  return (documents as any)[source] ?? {};
+}
+
+export type DocumentType<TDocumentNode extends DocumentNode<any, any>> = TDocumentNode extends DocumentNode<
+  infer TType,
+  any
+>
+  ? TType
+  : never;