feat(typed-document-node): Allow importing operation types (#10456)

* feat(typed-document-node): Allow importing operation types

* fix(typed-document-node): Handle fragments with operations import

* Add changeset

---------

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

Author: 3 people

.changeset/fifty-tools-beg.md

@@ -0,0 +1,9 @@
+---
+'@graphql-codegen/typed-document-node': minor
+---
+
+feat(typed-document-node): Allow importing operation types
+
+Adds the `importOperationTypesFrom` option, similar to many other codegen
+plugins. This allows importing the operation types rather than needing to
+generate them within this plugin config.

packages/plugins/typescript/typed-document-node/src/config.ts

@@ -48,4 +48,31 @@ export interface TypeScriptTypedDocumentNodesConfig extends RawClientSideBasePlu
    * ```
    */
   addTypenameToSelectionSets?: boolean;
+
+  /**
+   * @description Allows you to import the operation types from a different file.
+   * @default ""
+   *
+   * @exampleMarkdown
+   * ```ts filename="codegen.ts"
+   *  import type { CodegenConfig } from '@graphql-codegen/cli';
+   *
+   *  const config: CodegenConfig = {
+   *    // ...
+   *    generates: {
+   *      'path/to/file.ts': {
+   *        plugins: ['typescript', 'typescript-operations']
+   *      },
+   *      'path/to/file2.ts': {
+   *        plugins: ['typed-document-node'],
+   *        config: {
+   *          importOperationTypesFrom: 'path/to/file.ts'
+   *        },
+   *      },
+   *    },
+   *  };
+   *  export default config;
+   * ```
+   */
+  importOperationTypesFrom?: string;
 }

packages/plugins/typescript/typed-document-node/src/visitor.ts

@@ -98,16 +98,19 @@ export class TypeScriptDocumentNodesVisitor extends ClientSideBaseVisitor<
   }
 
   protected getDocumentNodeSignature(resultType: string, variablesTypes: string, node) {
+    const shouldUseImportPrefix = !!this.config.importOperationTypesFrom;
+    const resultImportPrefix = shouldUseImportPrefix && resultType !== 'unknown' ? 'Types.' : '';
+    const variablesImportPrefix = shouldUseImportPrefix && variablesTypes !== 'unknown' ? 'Types.' : '';
     if (
       this.config.documentMode === DocumentMode.documentNode ||
       this.config.documentMode === DocumentMode.documentNodeImportFragments ||
       this.config.documentMode === DocumentMode.graphQLTag
     ) {
-      return ` as unknown as DocumentNode<${resultType}, ${variablesTypes}>`;
+      return ` as unknown as DocumentNode<${resultImportPrefix}${resultType}, ${variablesImportPrefix}${variablesTypes}>`;
     }
 
     if (this.config.documentMode === DocumentMode.string) {
-      return ` as unknown as TypedDocumentString<${resultType}, ${variablesTypes}>`;
+      return ` as unknown as TypedDocumentString<${resultImportPrefix}${resultType}, ${variablesImportPrefix}${variablesTypes}>`;
     }
 
     return super.getDocumentNodeSignature(resultType, variablesTypes, node);

packages/plugins/typescript/typed-document-node/tests/typed-document-node.spec.ts

@@ -77,4 +77,44 @@ describe('TypedDocumentNode', () => {
       expect((res.content.match(/__typename/g) || []).length).toBe(1);
     });
   });
+
+  describe('addTypenameToSelectionSets', () => {
+    it('Should import Types from the given file', async () => {
+      const schema = buildSchema(/* GraphQL */ `
+        schema {
+          query: Query
+        }
+
+        type Query {
+          job: Job
+        }
+
+        type Job {
+          id: ID!
+        }
+      `);
+
+      const ast = parse(/* GraphQL */ `
+        query {
+          job {
+            ...JobFragment
+          }
+        }
+
+        fragment JobFragment on Job {
+          id
+        }
+      `);
+
+      const res = (await plugin(
+        schema,
+        [{ location: '', document: ast }],
+        { importOperationTypesFrom: 'file.ts' },
+        { outputFile: '' }
+      )) as Types.ComplexPluginOutput;
+
+      expect((res.content.match(/<Types.Query, Types.QueryVariables>/g) || []).length).toBe(1);
+      expect((res.content.match(/<Types.JobFragmentFragment, unknown>/g) || []).length).toBe(1);
+    });
+  });
 });