feat: add emitLegacyCommonJSImports flag (#8077)

* feat: add `emitLegacyCommonJSImports` flag

* add changeset

* update docs

* fix

* fix(emitLegacyCommonJSImports): normalize value across plugins and presets + fix specs

Introduced a `shouldEmitLegacyCommonJSImports()` helper to get proper value

Co-authored-by: Charly POLY <cpoly55@gmail.com>

.changeset/kind-taxis-refuse.md

@@ -0,0 +1,22 @@
+---
+'@graphql-codegen/cli': minor
+'@graphql-codegen/visitor-plugin-common': minor
+'@graphql-codegen/gql-tag-operations': minor
+'@graphql-codegen/near-operation-file-preset': minor
+'@graphql-codegen/plugin-helpers': minor
+---
+
+Add new flag to emit legacy common js imports. Default it will be `true` this way it ensure that generated code works with [non-compliant bundlers](https://github.com/dotansimha/graphql-code-generator/issues/8065).
+
+You can use the option in your config:
+```yaml
+schema: 'schema.graphql'
+ documents:
+   - 'src/**/*.graphql'
+ emitLegacyCommonJSImports: true
+```
+
+Alternative you can use the CLI to set this option:
+```bash
+ $ codegen --config-file=config.yml --emit-legacy-common-js-imports
+```

dev-test/codegen.yml

@@ -1,6 +1,7 @@
 hooks:
   afterAllFileWrite:
     - prettier --write
+emitLegacyCommonJSImports: false
 generates:
   ./dev-test/test-schema/resolvers-types.ts:
     schema: ./dev-test/test-schema/schema-text.js

dev-test/gql-tag-operations-urql/gql/gql.d.ts

@@ -4,13 +4,13 @@ import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/
 declare module '@urql/core' {
   export function gql(
     source: '\n  query Foo {\n    Tweets {\n      id\n    }\n  }\n'
-  ): typeof import('./graphql').FooDocument;
+  ): typeof import('./graphql.js').FooDocument;
   export function gql(
     source: '\n  fragment Lel on Tweet {\n    id\n    body\n  }\n'
-  ): typeof import('./graphql').LelFragmentDoc;
+  ): typeof import('./graphql.js').LelFragmentDoc;
   export function gql(
     source: '\n  query Bar {\n    Tweets {\n      ...Lel\n    }\n  }\n'
-  ): typeof import('./graphql').BarDocument;
+  ): typeof import('./graphql.js').BarDocument;
   export function gql(source: string): unknown;
 
   export type DocumentType<TDocumentNode extends DocumentNode<any, any>> = TDocumentNode extends DocumentNode<

packages/graphql-codegen-cli/src/codegen.ts

@@ -16,7 +16,7 @@ import { GraphQLError, GraphQLSchema, DocumentNode } from 'graphql';
 import { getPluginByName } from './plugins.js';
 import { getPresetByName } from './presets.js';
 import { debugLog } from './utils/debugging.js';
-import { CodegenContext, ensureContext } from './config.js';
+import { CodegenContext, ensureContext, shouldEmitLegacyCommonJSImports } from './config.js';
 import fs from 'fs';
 import path from 'path';
 import { cpus } from 'os';
@@ -315,6 +315,7 @@ export async function executeCodegen(input: CodegenContext | Types.Config): Prom
                             ...(typeof outputFileTemplateConfig === 'string'
                               ? { value: outputFileTemplateConfig }
                               : outputFileTemplateConfig),
+                            emitLegacyCommonJSImports: shouldEmitLegacyCommonJSImports(config, filename),
                           };
 
                           const outputs: Types.GenerateOptions[] = hasPreset
@@ -350,7 +351,10 @@ export async function executeCodegen(input: CodegenContext | Types.Config): Prom
 
                           const process = async (outputArgs: Types.GenerateOptions) => {
                             const output = await codegen({
-                              ...outputArgs,
+                              ...{
+                                ...outputArgs,
+                                emitLegacyCommonJSImports: shouldEmitLegacyCommonJSImports(config, outputArgs.filename),
+                              },
                               cache,
                             });
                             result.push({

packages/graphql-codegen-cli/src/config.ts

@@ -31,6 +31,7 @@ export type YamlCliFlags = {
   errorsOnly: boolean;
   profile: boolean;
   ignoreNoDocuments?: boolean;
+  emitLegacyCommonJSImports?: boolean;
 };
 
 export function generateSearchPlaces(moduleName: string) {
@@ -287,6 +288,11 @@ export function updateContextWithCliFlags(context: CodegenContext, cliFlags: Yam
     config.ignoreNoDocuments = cliFlags['ignore-no-documents'] === true;
   }
 
+  if (cliFlags['emit-legacy-common-js-imports'] !== undefined) {
+    // for some reason parsed value is `'false'` string so this ensure it always is a boolean.
+    config.emitLegacyCommonJSImports = cliFlags['emit-legacy-common-js-imports'] === true;
+  }
+
   if (cliFlags.project) {
     context.useProject(cliFlags.project);
   }
@@ -439,3 +445,19 @@ function addHashToDocumentFiles(documentFilesPromise: Promise<Types.DocumentFile
     })
   );
 }
+
+export function shouldEmitLegacyCommonJSImports(config: Types.Config, outputPath: string): boolean {
+  const globalValue = config.emitLegacyCommonJSImports === undefined ? true : !!config.emitLegacyCommonJSImports;
+  // const outputConfig = config.generates[outputPath];
+
+  // if (!outputConfig) {
+  //   debugLog(`Couldn't find a config of ${outputPath}`);
+  //   return globalValue;
+  // }
+
+  // if (isConfiguredOutput(outputConfig) && typeof outputConfig.emitLegacyCommonJSImports === 'boolean') {
+  //   return outputConfig.emitLegacyCommonJSImports;
+  // }
+
+  return globalValue;
+}

packages/graphql-codegen-cli/tests/cli-flags.spec.ts

@@ -134,6 +134,34 @@ describe('CLI Flags', () => {
     expect(config.ignoreNoDocuments).toBeFalsy();
   });
 
+  it('Should overwrite emitLegacyCommonJSImports config using cli flags to true', async () => {
+    mockConfig(`
+        schema: schema.graphql
+        emitLegacyCommonJSImports: false
+        generates:
+            file.ts:
+                - plugin
+    `);
+    const args = createArgv('--emit-legacy-common-js-imports');
+    const context = await createContext(parseArgv(args));
+    const config = context.getConfig();
+    expect(config.emitLegacyCommonJSImports).toBeTruthy();
+  });
+
+  it('Should overwrite emitLegacyCommonJSImports config using cli flags to false', async () => {
+    mockConfig(`
+        schema: schema.graphql
+        emitLegacyCommonJSImports: true
+        generates:
+            file.ts:
+                - plugin
+    `);
+    const args = createArgv('--emit-legacy-common-js-imports=false');
+    const context = await createContext(parseArgv(args));
+    const config = context.getConfig();
+    expect(config.emitLegacyCommonJSImports).toBeFalsy();
+  });
+
   it('Should overwrite ignoreNoDocuments config using cli flags to true', async () => {
     mockConfig(`
         schema: schema.graphql

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

@@ -7,6 +7,7 @@ export type ImportDeclaration<T = string> = {
   baseOutputDir: string;
   baseDir: string;
   typesImport: boolean;
+  emitLegacyCommonJSImports: boolean;
 };
 
 export type ImportSource<T = string> = {
@@ -56,9 +57,14 @@ export function generateImportStatement(statement: ImportDeclaration): string {
     importSource.identifiers && importSource.identifiers.length
       ? `{ ${Array.from(new Set(importSource.identifiers)).join(', ')} }`
       : '*';
+  const importExtension =
+    importPath.startsWith('/') || importPath.startsWith('.') ? (statement.emitLegacyCommonJSImports ? '' : '.js') : '';
   const importAlias = importSource.namespace ? ` as ${importSource.namespace}` : '';
   const importStatement = typesImport ? 'import type' : 'import';
-  return `${importStatement} ${importNames}${importAlias} from '${importPath}';${importAlias ? '\n' : ''}`;
+  return `${importStatement} ${importNames}${importAlias} from '${importPath}${importExtension}';${
+    importAlias ? '\n' : ''
+  }`;
+  // return `${importStatement} ${importNames}${importAlias} from '${importPath}';${importAlias ? '\n' : ''}`;
 }
 
 function resolveImportPath(baseDir: string, outputPath: string, sourcePath: string) {

packages/plugins/typescript/gql-tag-operations/src/index.ts

@@ -25,21 +25,22 @@ export const plugin: PluginFunction<{
   sourcesWithOperations: Array<SourceWithOperations>;
   useTypeImports?: boolean;
   augmentedModuleName?: string;
-}> = (_, __, { sourcesWithOperations, useTypeImports, augmentedModuleName }, _info) => {
+  emitLegacyCommonJSImports?: boolean;
+}> = (_, __, { sourcesWithOperations, useTypeImports, augmentedModuleName, emitLegacyCommonJSImports }, _info) => {
   if (!sourcesWithOperations) {
     return '';
   }
 
   if (augmentedModuleName == null) {
     return [
-      `import * as graphql from './graphql.js';\n`,
+      `import * as graphql from './graphql${emitLegacyCommonJSImports ? '' : '.js'}';\n`,
       `${
         useTypeImports ? 'import type' : 'import'
       } { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';\n`,
       `\n`,
       ...getDocumentRegistryChunk(sourcesWithOperations),
       `\n`,
-      ...getGqlOverloadChunk(sourcesWithOperations, 'lookup'),
+      ...getGqlOverloadChunk(sourcesWithOperations, 'lookup', emitLegacyCommonJSImports),
       `\n`,
       `export function gql(source: string): unknown;\n`,
       `export function gql(source: string) {\n`,
@@ -55,7 +56,7 @@ export const plugin: PluginFunction<{
     `declare module "${augmentedModuleName}" {`,
     [
       `\n`,
-      ...getGqlOverloadChunk(sourcesWithOperations, 'augmented'),
+      ...getGqlOverloadChunk(sourcesWithOperations, 'augmented', emitLegacyCommonJSImports),
       `export function gql(source: string): unknown;\n`,
       `\n`,
       ...documentTypePartial,
@@ -84,7 +85,11 @@ function getDocumentRegistryChunk(sourcesWithOperations: Array<SourceWithOperati
 
 type Mode = 'lookup' | 'augmented';
 
-function getGqlOverloadChunk(sourcesWithOperations: Array<SourceWithOperations>, mode: Mode) {
+function getGqlOverloadChunk(
+  sourcesWithOperations: Array<SourceWithOperations>,
+  mode: Mode,
+  emitLegacyCommonJSImports?: boolean
+) {
   const lines = new Set<string>();
 
   // We intentionally don't use a <T extends keyof typeof documents> generic, because TS
@@ -94,7 +99,9 @@ function getGqlOverloadChunk(sourcesWithOperations: Array<SourceWithOperations>,
     const returnType =
       mode === 'lookup'
         ? `(typeof documents)[${JSON.stringify(originalString)}]`
-        : `typeof import('./graphql').${operations[0].initialName}`;
+        : emitLegacyCommonJSImports
+        ? `typeof import('./graphql').${operations[0].initialName}`
+        : `typeof import('./graphql.js').${operations[0].initialName}`;
     lines.add(`export function gql(source: ${JSON.stringify(originalString)}): ${returnType};\n`);
   }
 

packages/presets/gql-tag-operations/tests/gql-tag-operations.spec.ts

@@ -36,7 +36,7 @@ describe('gql-tag-operations-preset', () => {
     const gqlFile = result.find(file => file.filename === 'out1/gql.ts');
     expect(gqlFile.content).toMatchInlineSnapshot(`
           "/* eslint-disable */
-          import * as graphql from './graphql.js';
+          import * as graphql from './graphql';
           import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
 
           const documents = {
@@ -91,7 +91,7 @@ describe('gql-tag-operations-preset', () => {
     const gqlFile = result.find(file => file.filename === 'out1/gql.ts');
     expect(gqlFile.content).toMatchInlineSnapshot(`
           "/* eslint-disable */
-          import * as graphql from './graphql.js';
+          import * as graphql from './graphql';
           import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
 
           const documents = {
@@ -139,7 +139,7 @@ describe('gql-tag-operations-preset', () => {
     const gqlFile = result.find(file => file.filename === 'out1/gql.ts');
     expect(gqlFile.content).toMatchInlineSnapshot(`
       "/* eslint-disable */
-      import * as graphql from './graphql.js';
+      import * as graphql from './graphql';
       import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
 
       const documents = {
@@ -188,7 +188,7 @@ describe('gql-tag-operations-preset', () => {
     const gqlFile = result.find(file => file.filename === 'out1/gql.ts');
     expect(gqlFile.content).toMatchInlineSnapshot(`
       "/* eslint-disable */
-      import * as graphql from './graphql.js';
+      import * as graphql from './graphql';
       import type { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
 
       const documents = {
@@ -283,7 +283,7 @@ describe('gql-tag-operations-preset', () => {
     const gqlFile = result.find(file => file.filename === 'out1/gql.ts');
     expect(gqlFile.content).toMatchInlineSnapshot(`
       "/* eslint-disable */
-      import * as graphql from './graphql.js';
+      import * as graphql from './graphql';
       import type { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
 
       const documents = {