feat: add includeExternalFragments config option (#10270)

This option allows you to include external fragments in the generated code.

Closes #10269.

Co-authored-by: Eddy Nguyen <[email protected]>

Author: adapap

.changeset/thin-shirts-repair.md

@@ -0,0 +1,6 @@
+---
+'@graphql-codegen/visitor-plugin-common': minor
+'@graphql-codegen/typescript-operations': minor
+---
+
+feat: implement `includeExternalFragments: boolean` option

packages/plugins/other/visitor-plugin-common/src/base-visitor.ts

@@ -38,6 +38,7 @@ export interface ParsedConfig {
   inlineFragmentTypes: InlineFragmentTypeOptions;
   emitLegacyCommonJSImports: boolean;
   printFieldsOnNewLines: boolean;
+  includeExternalFragments: boolean;
 }
 
 export interface RawConfig {
@@ -391,6 +392,13 @@ export interface RawConfig {
    * without resorting to running tools like Prettier on the output.
    */
   printFieldsOnNewLines?: boolean;
+
+  /**
+   * @default false
+   * @description Whether to include external fragments in the generated code. External fragments are not defined
+   * in the same location as the operation definition.
+   */
+  includeExternalFragments?: boolean;
 }
 
 export class BaseVisitor<TRawConfig extends RawConfig = RawConfig, TPluginConfig extends ParsedConfig = ParsedConfig> {
@@ -415,6 +423,7 @@ export class BaseVisitor<TRawConfig extends RawConfig = RawConfig, TPluginConfig
         rawConfig.emitLegacyCommonJSImports === undefined ? true : !!rawConfig.emitLegacyCommonJSImports,
       extractAllFieldsToTypes: rawConfig.extractAllFieldsToTypes ?? false,
       printFieldsOnNewLines: rawConfig.printFieldsOnNewLines ?? false,
+      includeExternalFragments: rawConfig.includeExternalFragments ?? false,
       ...((additionalConfig || {}) as any),
     };
 

packages/plugins/other/visitor-plugin-common/src/client-side-base-visitor.ts

@@ -558,7 +558,7 @@ export class ClientSideBaseVisitor<
     const graph = this.fragmentsGraph;
     const orderedDeps = graph.overallOrder();
     const localFragments = orderedDeps
-      .filter(name => !graph.getNodeData(name).isExternal)
+      .filter(name => !graph.getNodeData(name).isExternal || this.config.includeExternalFragments)
       .map(name => this._generateFragment(graph.getNodeData(name).node));
 
     return localFragments.join('\n');

packages/plugins/other/visitor-plugin-common/tests/client-side-base-visitor.spec.ts

@@ -274,3 +274,59 @@ describe('getImports', () => {
     });
   });
 });
+
+describe('includeExternalFragments', () => {
+  const schema = buildSchema(/* GraphQL */ `
+    type Query {
+      a: A
+    }
+
+    type A {
+      foo: String
+      bar: String
+    }
+  `);
+
+  const document = parse(`
+    query fooBarQuery {
+      a {
+        ...ExternalA
+      }
+    }
+    `);
+
+  const externalFragments = parse(`
+    fragment ExternalA on A {
+      foo
+      bar
+    }
+    `)
+    .definitions.filter(d => d.kind === Kind.FRAGMENT_DEFINITION)
+    .map(fragmentDef => ({
+      node: fragmentDef,
+      name: fragmentDef.name.value,
+      onType: fragmentDef.typeCondition.name.value,
+      isExternal: true,
+    }));
+
+  it('should not include external fragments', () => {
+    const visitor = new ClientSideBaseVisitor(schema, externalFragments, {}, {});
+
+    visitor.OperationDefinition(document.definitions[0] as OperationDefinitionNode);
+
+    expect(visitor.fragments).toBe('');
+  });
+
+  it('should include external fragments', () => {
+    const visitor = new ClientSideBaseVisitor(
+      schema,
+      externalFragments,
+      {
+        includeExternalFragments: true,
+      },
+      {}
+    );
+
+    expect(visitor.fragments).toContain('ExternalAFragment');
+  });
+});