add mock data created by using makeFragmentData

this mock data is what is not able to be typed with the previous `makeFragmentData` function.
That is because `TweetsFragment` includes two different fragments

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

@@ -15,9 +15,11 @@ import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/
 const documents = {
   '\n  fragment TweetFragment on Tweet {\n    id\n    body\n    ...TweetAuthorFragment\n  }\n':
     types.TweetFragmentFragmentDoc,
+  '\n  fragment TweetStatsFragment on Tweet {\n    id\n    Stats {\n      views\n    }\n  }\n':
+    types.TweetStatsFragmentFragmentDoc,
   '\n  fragment TweetAuthorFragment on Tweet {\n    id\n    author {\n      id\n      username\n    }\n  }\n':
     types.TweetAuthorFragmentFragmentDoc,
-  '\n  fragment TweetsFragment on Query {\n    Tweets {\n      id\n      ...TweetFragment\n    }\n  }\n':
+  '\n  fragment TweetsFragment on Query {\n    Tweets {\n      id\n      ...TweetFragment\n      ...TweetStatsFragment\n    }\n  }\n':
     types.TweetsFragmentFragmentDoc,
   '\n  query TweetAppQuery {\n    ...TweetsFragment\n  }\n': types.TweetAppQueryDocument,
 };
@@ -42,6 +44,12 @@ export function graphql(source: string): unknown;
 export function graphql(
   source: '\n  fragment TweetFragment on Tweet {\n    id\n    body\n    ...TweetAuthorFragment\n  }\n'
 ): (typeof documents)['\n  fragment TweetFragment on Tweet {\n    id\n    body\n    ...TweetAuthorFragment\n  }\n'];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export function graphql(
+  source: '\n  fragment TweetStatsFragment on Tweet {\n    id\n    Stats {\n      views\n    }\n  }\n'
+): (typeof documents)['\n  fragment TweetStatsFragment on Tweet {\n    id\n    Stats {\n      views\n    }\n  }\n'];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
@@ -52,8 +60,8 @@ export function graphql(
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
 export function graphql(
-  source: '\n  fragment TweetsFragment on Query {\n    Tweets {\n      id\n      ...TweetFragment\n    }\n  }\n'
-): (typeof documents)['\n  fragment TweetsFragment on Query {\n    Tweets {\n      id\n      ...TweetFragment\n    }\n  }\n'];
+  source: '\n  fragment TweetsFragment on Query {\n    Tweets {\n      id\n      ...TweetFragment\n      ...TweetStatsFragment\n    }\n  }\n'
+): (typeof documents)['\n  fragment TweetsFragment on Query {\n    Tweets {\n      id\n      ...TweetFragment\n      ...TweetStatsFragment\n    }\n  }\n'];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */

dev-test/gql-tag-operations-masking/gql/graphql.ts

@@ -111,6 +111,12 @@ export type TweetFragmentFragment = ({ __typename?: 'Tweet'; id: string; body: s
   ' $fragmentRefs'?: { TweetAuthorFragmentFragment: TweetAuthorFragmentFragment };
 }) & { ' $fragmentName'?: 'TweetFragmentFragment' };
 
+export type TweetStatsFragmentFragment = {
+  __typename?: 'Tweet';
+  id: string;
+  Stats?: { __typename?: 'Stat'; views?: number | null } | null;
+} & { ' $fragmentName'?: 'TweetStatsFragmentFragment' };
+
 export type TweetAuthorFragmentFragment = {
   __typename?: 'Tweet';
   id: string;
@@ -120,7 +126,12 @@ export type TweetAuthorFragmentFragment = {
 export type TweetsFragmentFragment = {
   __typename?: 'Query';
   Tweets?: Array<
-    { __typename?: 'Tweet'; id: string } & { ' $fragmentRefs'?: { TweetFragmentFragment: TweetFragmentFragment } }
+    { __typename?: 'Tweet'; id: string } & {
+      ' $fragmentRefs'?: {
+        TweetFragmentFragment: TweetFragmentFragment;
+        TweetStatsFragmentFragment: TweetStatsFragmentFragment;
+      };
+    }
   > | null;
 } & { ' $fragmentName'?: 'TweetsFragmentFragment' };
 
@@ -197,6 +208,30 @@ export const TweetFragmentFragmentDoc = {
     },
   ],
 } as unknown as DocumentNode<TweetFragmentFragment, unknown>;
+export const TweetStatsFragmentFragmentDoc = {
+  kind: 'Document',
+  definitions: [
+    {
+      kind: 'FragmentDefinition',
+      name: { kind: 'Name', value: 'TweetStatsFragment' },
+      typeCondition: { kind: 'NamedType', name: { kind: 'Name', value: 'Tweet' } },
+      selectionSet: {
+        kind: 'SelectionSet',
+        selections: [
+          { kind: 'Field', name: { kind: 'Name', value: 'id' } },
+          {
+            kind: 'Field',
+            name: { kind: 'Name', value: 'Stats' },
+            selectionSet: {
+              kind: 'SelectionSet',
+              selections: [{ kind: 'Field', name: { kind: 'Name', value: 'views' } }],
+            },
+          },
+        ],
+      },
+    },
+  ],
+} as unknown as DocumentNode<TweetStatsFragmentFragment, unknown>;
 export const TweetsFragmentFragmentDoc = {
   kind: 'Document',
   definitions: [
@@ -215,6 +250,7 @@ export const TweetsFragmentFragmentDoc = {
               selections: [
                 { kind: 'Field', name: { kind: 'Name', value: 'id' } },
                 { kind: 'FragmentSpread', name: { kind: 'Name', value: 'TweetFragment' } },
+                { kind: 'FragmentSpread', name: { kind: 'Name', value: 'TweetStatsFragment' } },
               ],
             },
           },
@@ -256,6 +292,25 @@ export const TweetsFragmentFragmentDoc = {
         ],
       },
     },
+    {
+      kind: 'FragmentDefinition',
+      name: { kind: 'Name', value: 'TweetStatsFragment' },
+      typeCondition: { kind: 'NamedType', name: { kind: 'Name', value: 'Tweet' } },
+      selectionSet: {
+        kind: 'SelectionSet',
+        selections: [
+          { kind: 'Field', name: { kind: 'Name', value: 'id' } },
+          {
+            kind: 'Field',
+            name: { kind: 'Name', value: 'Stats' },
+            selectionSet: {
+              kind: 'SelectionSet',
+              selections: [{ kind: 'Field', name: { kind: 'Name', value: 'views' } }],
+            },
+          },
+        ],
+      },
+    },
   ],
 } as unknown as DocumentNode<TweetsFragmentFragment, unknown>;
 export const TweetAppQueryDocument = {
@@ -305,6 +360,25 @@ export const TweetAppQueryDocument = {
         ],
       },
     },
+    {
+      kind: 'FragmentDefinition',
+      name: { kind: 'Name', value: 'TweetStatsFragment' },
+      typeCondition: { kind: 'NamedType', name: { kind: 'Name', value: 'Tweet' } },
+      selectionSet: {
+        kind: 'SelectionSet',
+        selections: [
+          { kind: 'Field', name: { kind: 'Name', value: 'id' } },
+          {
+            kind: 'Field',
+            name: { kind: 'Name', value: 'Stats' },
+            selectionSet: {
+              kind: 'SelectionSet',
+              selections: [{ kind: 'Field', name: { kind: 'Name', value: 'views' } }],
+            },
+          },
+        ],
+      },
+    },
     {
       kind: 'FragmentDefinition',
       name: { kind: 'Name', value: 'TweetsFragment' },
@@ -320,6 +394,7 @@ export const TweetAppQueryDocument = {
               selections: [
                 { kind: 'Field', name: { kind: 'Name', value: 'id' } },
                 { kind: 'FragmentSpread', name: { kind: 'Name', value: 'TweetFragment' } },
+                { kind: 'FragmentSpread', name: { kind: 'Name', value: 'TweetStatsFragment' } },
               ],
             },
           },

dev-test/gql-tag-operations-masking/src/index.tsx

@@ -11,6 +11,15 @@ const TweetFragment = graphql(/* GraphQL */ `
   }
 `);
 
+const TweetStatsFragment = graphql(/* GraphQL */ `
+  fragment TweetStatsFragment on Tweet {
+    id
+    Stats {
+      views
+    }
+  }
+`);
+
 const TweetAuthorFragment = graphql(/* GraphQL */ `
   fragment TweetAuthorFragment on Tweet {
     id
@@ -26,6 +35,7 @@ const TweetsFragment = graphql(/* GraphQL */ `
     Tweets {
       id
       ...TweetFragment
+      ...TweetStatsFragment
     }
   }
 `);
@@ -47,6 +57,12 @@ const Tweet = (props: { tweet: FragmentType<typeof TweetFragment> }) => {
   );
 };
 
+const TweetStats = (props: { tweet: FragmentType<typeof TweetStatsFragment> }) => {
+  const tweet = useFragment(TweetStatsFragment, props.tweet);
+
+  return <div>{tweet.Stats?.views} views</div>;
+};
+
 const TweetAuthor = (props: { tweet: FragmentType<typeof TweetAuthorFragment> }) => {
   const tweet = useFragment(TweetAuthorFragment, props.tweet);
 
@@ -56,7 +72,16 @@ const TweetAuthor = (props: { tweet: FragmentType<typeof TweetAuthorFragment> })
 const Tweets = (props: { tweets: FragmentType<typeof TweetsFragment> | undefined }) => {
   const tweets = useFragment(TweetsFragment, props.tweets);
 
-  return <ul>{tweets?.Tweets?.map(tweet => <Tweet key={tweet.id} tweet={tweet} />) ?? null}</ul>;
+  return (
+    <ul>
+      {tweets?.Tweets?.map(tweet => (
+        <div key={tweet.id}>
+          <Tweet tweet={tweet} />
+          <TweetStats tweet={tweet} />
+        </div>
+      )) ?? null}
+    </ul>
+  );
 };
 
 const App = () => {

dev-test/gql-tag-operations-masking/src/mocks.ts

@@ -0,0 +1,21 @@
+import { makeFragmentData } from '../gql';
+import { TweetsFragmentFragmentDoc } from '../gql/graphql';
+
+const tweetsFragmentMockData = makeFragmentData(
+  {
+    Tweets: [
+      {
+        id: 'tweet_b',
+        author: {
+          id: 'user_b',
+          username: 'bob',
+        },
+        body: 'Hi:)',
+        Stats: {
+          views: 200,
+        },
+      },
+    ],
+  },
+  TweetsFragmentFragmentDoc
+);