[operations] CODEGEN-784 - Fix Apollo @unmask fragmentRefs (#10302)

Author: eddeee888

.changeset/funny-monkeys-hide.md

@@ -0,0 +1,7 @@
+---
+'@graphql-codegen/visitor-plugin-common': patch
+'@graphql-codegen/typescript-operations': patch
+'@graphql-codegen/client-preset': patch
+---
+
+Fix Apollo unmask directive incorrectly generating fragmentRefs

packages/plugins/other/visitor-plugin-common/src/selection-set-to-object.ts

@@ -548,6 +548,7 @@ export class SelectionSetToObject<Config extends ParsedDocumentsConfig = ParsedD
     selectionNodes = [...selectionNodes];
     let inlineFragmentConditional = false;
     for (const selectionNode of selectionNodes) {
+      // 1. Handle Field or Directtives selection nodes
       if ('kind' in selectionNode) {
         if (selectionNode.kind === 'Field') {
           if (selectionNode.selectionSet) {
@@ -598,21 +599,31 @@ export class SelectionSetToObject<Config extends ParsedDocumentsConfig = ParsedD
         continue;
       }
 
-      if (this._config.inlineFragmentTypes === 'combine' || this._config.inlineFragmentTypes === 'mask') {
-        fragmentsSpreadUsages.push(selectionNode.typeName);
+      // 2. Handle Fragment Spread nodes
+      // A Fragment Spread can be:
+      // - masked: the fields declared in the Fragment do not appear in the operation types
+      // - inline: the fields declared in the Fragment appear in the operation types
 
-        const isApolloUnmaskEnabled = this._config.customDirectives.apolloUnmask;
+      // 2a. If `inlineFragmentTypes` is 'combine' or 'mask', the Fragment Spread is masked by default
+      // In some cases, a masked node could be unmasked (i.e. treated as inline):
+      // - Fragment spread node is marked with Apollo `@unmask`, e.g. `...User @unmask`
+      if (this._config.inlineFragmentTypes === 'combine' || this._config.inlineFragmentTypes === 'mask') {
+        let isMasked = true;
 
         if (
-          !isApolloUnmaskEnabled ||
-          (isApolloUnmaskEnabled && !selectionNode.fragmentDirectives?.some(d => d.name.value === 'unmask'))
+          this._config.customDirectives.apolloUnmask &&
+          selectionNode.fragmentDirectives.some(d => d.name.value === 'unmask')
         ) {
+          isMasked = false;
+        }
+
+        if (isMasked) {
+          fragmentsSpreadUsages.push(selectionNode.typeName);
           continue;
         }
       }
 
-      // Handle Fragment Spreads by generating inline types.
-
+      // 2b. If the Fragment Spread is not masked, generate inline types.
       const fragmentType = this._schema.getType(selectionNode.onType);
 
       if (fragmentType == null) {

packages/plugins/typescript/operations/tests/ts-documents.apolloUnmask.spec.ts

@@ -25,10 +25,7 @@ describe('TypeScript Operations Plugin - apolloUnmask', () => {
       "export type Unnamed_1_QueryVariables = Exact<{ [key: string]: never; }>;
 
 
-      export type Unnamed_1_Query = { __typename?: 'Query', me?: (
-          { __typename?: 'User', id: string }
-          & { ' $fragmentRefs'?: { 'UserFragmentFragment': UserFragmentFragment } }
-        ) | null };
+      export type Unnamed_1_Query = { __typename?: 'Query', me?: { __typename?: 'User', id: string } | null };
 
       export type UserFragmentFragment = { __typename?: 'User', id: string } & { ' $fragmentName'?: 'UserFragmentFragment' };
       "
@@ -125,7 +122,7 @@ describe('TypeScript Operations Plugin - apolloUnmask', () => {
 
       export type Unnamed_1_Query = { __typename?: 'Query', me?: (
           { __typename?: 'User', id: string }
-          & { ' $fragmentRefs'?: { 'UserFragmentFragment': UserFragmentFragment;'UserFragment2Fragment': UserFragment2Fragment } }
+          & { ' $fragmentRefs'?: { 'UserFragment2Fragment': UserFragment2Fragment } }
         ) | null };
 
       export type UserFragmentFragment = { __typename?: 'User', id: string } & { ' $fragmentName'?: 'UserFragmentFragment' };
@@ -164,7 +161,7 @@ describe('TypeScript Operations Plugin - apolloUnmask', () => {
 
       export type Unnamed_1_Query = { __typename?: 'Query', me?: (
           { __typename?: 'User', id: string, email: string }
-          & { ' $fragmentRefs'?: { 'UserFragmentFragment': UserFragmentFragment;'UserFragment2Fragment': UserFragment2Fragment } }
+          & { ' $fragmentRefs'?: { 'UserFragment2Fragment': UserFragment2Fragment } }
         ) | null };
 
       export type UserFragmentFragment = { __typename?: 'User', id: string, email: string } & { ' $fragmentName'?: 'UserFragmentFragment' };

packages/presets/client/tests/client-preset.spec.ts

@@ -619,10 +619,7 @@ export * from "./gql";`);
       export type MeQueryVariables = Exact<{ [key: string]: never; }>;
 
 
-      export type MeQuery = { __typename?: 'Query', unmasked?: (
-          { __typename?: 'User', id: string, name: string, age: number }
-          & { ' $fragmentRefs'?: { 'User_MeFragment': User_MeFragment } }
-        ) | null, masked?: (
+      export type MeQuery = { __typename?: 'Query', unmasked?: { __typename?: 'User', id: string, name: string, age: number } | null, masked?: (
           { __typename?: 'User', id: string }
           & { ' $fragmentRefs'?: { 'User_MeFragment': User_MeFragment } }
         ) | null };