fix(client-preset): remove fragment spread and inline fragments if th… (#10298)

* fix(client-preset): remove fragment spread and inline fragments if they are defined with `@client` directive

* tiny cleanup

Author: dotansimha

.changeset/empty-wolves-stare.md

@@ -0,0 +1,5 @@
+---
+'@graphql-codegen/client-preset': patch
+---
+
+Fix a bug where fragment spreads with `@client` directives is not being removed from the generated persisted documents

packages/presets/client/src/persisted-documents.spec.ts

@@ -0,0 +1,58 @@
+import { parse } from 'graphql';
+import { normalizeAndPrintDocumentNode } from './persisted-documents';
+
+describe('normalizeAndPrintDocumentNode', () => {
+  it('should remove client specific directives/fields from the document', () => {
+    const document = parse(/* GraphQL */ `
+      query myQuery {
+        regularField
+        clientSideOnlyField @client
+      }
+    `);
+    const result = normalizeAndPrintDocumentNode(document);
+    expect(result).toMatchInlineSnapshot(`"query myQuery { regularField }"`);
+  });
+
+  it('should remove @client when it is specified on an fragment spread', () => {
+    const document = parse(/* GraphQL */ `
+      query myQuery {
+        regularField
+        clientSideOnlyField @client
+        ...myFrag @client
+        ...myOtherFrag
+      }
+
+      fragment myFrag on Query {
+        someField
+      }
+    `);
+    const result = normalizeAndPrintDocumentNode(document);
+    expect(result).toMatchInlineSnapshot(
+      `"fragment myFrag on Query { someField } query myQuery { regularField ...myOtherFrag }"`
+    );
+  });
+
+  it('should remove @client when it is specified on an inline fragment', () => {
+    const document = parse(/* GraphQL */ `
+      query myQuery {
+        regularField
+        clientSideOnlyField @client
+        ...myFrag @client
+        ... on Query @client {
+          someField
+        }
+        ... on Query {
+          regularField
+        }
+      }
+
+      fragment myFrag on Query {
+        someField
+      }
+    `);
+    const result = normalizeAndPrintDocumentNode(document);
+    expect(result).toMatchInlineSnapshot(
+      `"fragment myFrag on Query { someField } query myQuery { regularField ... on Query { regularField } }"`
+    );
+  });
+});

packages/presets/client/src/persisted-documents.ts

@@ -2,6 +2,9 @@ import { printExecutableGraphQLDocument } from '@graphql-tools/documents';
 import * as crypto from 'crypto';
 import { Kind, visit, type DocumentNode } from 'graphql';
 
+const CLIENT_DIRECTIVE_NAME = 'client';
+const CONNECTION_DIRECTIVE_NAME = 'connection';
+
 /**
  * This function generates a hash from a document node.
  */
@@ -30,15 +33,26 @@ export function normalizeAndPrintDocumentNode(documentNode: DocumentNode): strin
    */
   const sanitizedDocument = visit(documentNode, {
     [Kind.FIELD](field) {
-      if (field.directives?.some(directive => directive.name.value === 'client')) {
+      if (field.directives?.some(directive => directive.name.value === CLIENT_DIRECTIVE_NAME)) {
+        return null;
+      }
+    },
+    [Kind.FRAGMENT_SPREAD](spread) {
+      if (spread.directives?.some(directive => directive.name.value === CLIENT_DIRECTIVE_NAME)) {
+        return null;
+      }
+    },
+    [Kind.INLINE_FRAGMENT](fragment) {
+      if (fragment.directives?.some(directive => directive.name.value === CLIENT_DIRECTIVE_NAME)) {
         return null;
       }
     },
     [Kind.DIRECTIVE](directive) {
-      if (directive.name.value === 'connection') {
+      if (directive.name.value === CONNECTION_DIRECTIVE_NAME) {
         return null;
       }
     },
   });
+
   return printExecutableGraphQLDocument(sanitizedDocument);
 }