fix: do not import the unused DocumentNode for typed-document-node

dev-test/githunt/typed-document-nodes.ts

@@ -1,5 +1,4 @@
-import { DocumentNode } from 'graphql';
-import { TypedDocumentNode } from '@graphql-typed-document-node/core';
+import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
 export type Maybe<T> = T | null;
 export type Exact<T extends { [key: string]: any }> = { [K in keyof T]: T[K] };
 /** All built-in and custom scalars, mapped to their actual values */
@@ -419,10 +418,7 @@ export const FeedEntryFragmentDoc: DocumentNode = {
     ...RepoInfoFragmentDoc.definitions,
   ],
 };
-export const OnCommentAddedDocument: TypedDocumentNode<
-  OnCommentAddedSubscription,
-  OnCommentAddedSubscriptionVariables
-> = {
+export const OnCommentAddedDocument: DocumentNode<OnCommentAddedSubscription, OnCommentAddedSubscriptionVariables> = {
   kind: 'Document',
   definitions: [
     {
@@ -479,7 +475,7 @@ export const OnCommentAddedDocument: TypedDocumentNode<
     },
   ],
 };
-export const CommentDocument: TypedDocumentNode<CommentQuery, CommentQueryVariables> = {
+export const CommentDocument: DocumentNode<CommentQuery, CommentQueryVariables> = {
   kind: 'Document',
   definitions: [
     {
@@ -626,7 +622,7 @@ export const CommentDocument: TypedDocumentNode<CommentQuery, CommentQueryVariab
     ...CommentsPageCommentFragmentDoc.definitions,
   ],
 };
-export const CurrentUserForProfileDocument: TypedDocumentNode<
+export const CurrentUserForProfileDocument: DocumentNode<
   CurrentUserForProfileQuery,
   CurrentUserForProfileQueryVariables
 > = {
@@ -659,7 +655,7 @@ export const CurrentUserForProfileDocument: TypedDocumentNode<
     },
   ],
 };
-export const FeedDocument: TypedDocumentNode<FeedQuery, FeedQueryVariables> = {
+export const FeedDocument: DocumentNode<FeedQuery, FeedQueryVariables> = {
   kind: 'Document',
   definitions: [
     {
@@ -732,10 +728,7 @@ export const FeedDocument: TypedDocumentNode<FeedQuery, FeedQueryVariables> = {
     ...FeedEntryFragmentDoc.definitions,
   ],
 };
-export const SubmitRepositoryDocument: TypedDocumentNode<
-  SubmitRepositoryMutation,
-  SubmitRepositoryMutationVariables
-> = {
+export const SubmitRepositoryDocument: DocumentNode<SubmitRepositoryMutation, SubmitRepositoryMutationVariables> = {
   kind: 'Document',
   definitions: [
     {
@@ -777,7 +770,7 @@ export const SubmitRepositoryDocument: TypedDocumentNode<
     },
   ],
 };
-export const SubmitCommentDocument: TypedDocumentNode<SubmitCommentMutation, SubmitCommentMutationVariables> = {
+export const SubmitCommentDocument: DocumentNode<SubmitCommentMutation, SubmitCommentMutationVariables> = {
   kind: 'Document',
   definitions: [
     {
@@ -831,7 +824,7 @@ export const SubmitCommentDocument: TypedDocumentNode<SubmitCommentMutation, Sub
     ...CommentsPageCommentFragmentDoc.definitions,
   ],
 };
-export const VoteDocument: TypedDocumentNode<VoteMutation, VoteMutationVariables> = {
+export const VoteDocument: DocumentNode<VoteMutation, VoteMutationVariables> = {
   kind: 'Document',
   definitions: [
     {

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

@@ -13,7 +13,7 @@ import { DepGraph } from 'dependency-graph';
 import gqlTag from 'graphql-tag';
 import { Types } from '@graphql-codegen/plugin-helpers';
 import { getConfigValue, buildScalars } from './utils';
-import { LoadedFragment } from './types';
+import { LoadedFragment, ParsedImport } from './types';
 import { basename, extname } from 'path';
 import { DEFAULT_SCALARS } from './scalars';
 import { pascalCase } from 'pascal-case';
@@ -54,6 +54,12 @@ export interface RawClientSideBasePluginConfig extends RawConfig {
    * ```
    */
   gqlImport?: string;
+  /**
+   * @default graphql#DocumentNode
+   * @description Customize from which module will `DocumentNode` be imported from.
+   * This is useful if you want to use modules other than `graphql`, e.g. `@graphql-typed-document-node`.
+   */
+  documentNodeImport?: string;
   /**
    * @default false
    * @description Set this configuration to `true` if you wish to tell codegen to generate code with no `export` identifier.
@@ -139,6 +145,7 @@ export interface RawClientSideBasePluginConfig extends RawConfig {
 
 export interface ClientSideBasePluginConfig extends ParsedConfig {
   gqlImport: string;
+  documentNodeImport: string;
   operationResultSuffix: string;
   dedupeOperationSuffix: boolean;
   omitOperationSuffix: boolean;
@@ -174,6 +181,7 @@ export class ClientSideBaseVisitor<
       dedupeOperationSuffix: getConfigValue(rawConfig.dedupeOperationSuffix, false),
       omitOperationSuffix: getConfigValue(rawConfig.omitOperationSuffix, false),
       gqlImport: rawConfig.gqlImport || null,
+      documentNodeImport: rawConfig.documentNodeImport || null,
       noExport: !!rawConfig.noExport,
       importOperationTypesFrom: getConfigValue(rawConfig.importOperationTypesFrom, null),
       operationResultSuffix: getConfigValue(rawConfig.operationResultSuffix, ''),
@@ -351,7 +359,7 @@ export class ClientSideBaseVisitor<
     return localFragments.join('\n');
   }
 
-  protected _parseImport(importStr: string): { moduleName: string; propName: string } {
+  protected _parseImport(importStr: string): ParsedImport {
     const [moduleName, propName] = importStr.split('#');
 
     return {
@@ -360,6 +368,12 @@ export class ClientSideBaseVisitor<
     };
   }
 
+  protected _generateImport({ moduleName, propName }: ParsedImport, varName: string, isTypeImport: boolean): string {
+    const typeImport = isTypeImport && this.config.useTypeImports ? 'import type' : 'import';
+    const propAlias = propName === varName ? '' : ` as ${varName}`;
+    return `${typeImport} ${propName ? `{ ${propName}${propAlias} }` : varName} from '${moduleName}';`;
+  }
+
   private clearExtension(path: string): string {
     const extension = extname(path);
 
@@ -373,21 +387,16 @@ export class ClientSideBaseVisitor<
   public getImports(options: { excludeFragments?: boolean } = {}): string[] {
     const imports = [...this._additionalImports];
 
-    const typeImport = this.config.useTypeImports ? 'import type' : 'import';
-
     switch (this.config.documentMode) {
       case DocumentMode.documentNode:
       case DocumentMode.documentNodeImportFragments: {
-        imports.push(`${typeImport} { DocumentNode } from 'graphql';`);
+        const documentNodeImport = this._parseImport(this.config.documentNodeImport || 'graphql#DocumentNode');
+        imports.push(this._generateImport(documentNodeImport, 'DocumentNode', true));
         break;
       }
       case DocumentMode.graphQLTag: {
         const gqlImport = this._parseImport(this.config.gqlImport || 'graphql-tag');
-        imports.push(
-          `import ${
-            gqlImport.propName ? `{ ${gqlImport.propName === 'gql' ? 'gql' : `${gqlImport.propName} as gql`} }` : 'gql'
-          } from '${gqlImport.moduleName}';`
-        );
+        imports.push(this._generateImport(gqlImport, 'gql', false));
         break;
       }
       case DocumentMode.external: {

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

@@ -83,3 +83,8 @@ export interface AvoidOptionalsConfig {
   object?: boolean;
   inputValue?: boolean;
 }
+
+export interface ParsedImport {
+  moduleName: string;
+  propName: string;
+}

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

@@ -7,8 +7,7 @@ import {
   DocumentMode,
   RawClientSideBasePluginConfig,
 } from '@graphql-codegen/visitor-plugin-common';
-import { OperationDefinitionNode , GraphQLSchema } from 'graphql';
-
+import { OperationDefinitionNode, GraphQLSchema } from 'graphql';
 
 export class TypeScriptDocumentNodesVisitor extends ClientSideBaseVisitor<
   RawClientSideBasePluginConfig,
@@ -24,8 +23,9 @@ export class TypeScriptDocumentNodesVisitor extends ClientSideBaseVisitor<
       schema,
       fragments,
       {
-        ...rawConfig,
         documentMode: DocumentMode.documentNodeImportFragments,
+        documentNodeImport: '@graphql-typed-document-node/core#TypedDocumentNode',
+        ...rawConfig,
       },
       {},
       documents
@@ -34,11 +34,7 @@ export class TypeScriptDocumentNodesVisitor extends ClientSideBaseVisitor<
     autoBind(this);
   }
 
-  getImports(): string[] {
-    return [...super.getImports(), `import { TypedDocumentNode } from '@graphql-typed-document-node/core';`];
-  }
-
   protected getDocumentNodeSignature(resultType: string, variablesTypes: string, node: OperationDefinitionNode) {
-    return `TypedDocumentNode<${resultType}, ${variablesTypes}>`;
+    return `DocumentNode<${resultType}, ${variablesTypes}>`;
   }
 }