Fixed emitLegacyCommonJSImports in getImports adding JS when truthy r… (

#8816)

.changeset/unlucky-suits-pay.md

@@ -0,0 +1,5 @@
+---
+'@graphql-codegen/visitor-plugin-common': patch
+---
+
+Fix issue where visitor-plugin-common emitted ESM imports for Operations when emitLegacyCommonJSImports is true

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

@@ -532,7 +532,7 @@ export class ClientSideBaseVisitor<
         if (this._collectedOperations.length > 0) {
           if (this.config.importDocumentNodeExternallyFrom === 'near-operation-file' && this._documents.length === 1) {
             let documentPath = `./${this.clearExtension(basename(this._documents[0].location))}`;
-            if (this.config.emitLegacyCommonJSImports) {
+            if (!this.config.emitLegacyCommonJSImports) {
               documentPath += '.js';
             }
 

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

@@ -0,0 +1,85 @@
+import { buildSchema, OperationDefinitionNode, parse } from 'graphql';
+import { ClientSideBaseVisitor, DocumentMode } from '../src/client-side-base-visitor.js';
+
+describe('getImports', () => {
+  describe('when documentMode "external", importDocumentNodeExternallyFrom is "near-operation-file"', () => {
+    const schema = buildSchema(/* GraphQL */ `
+      type Query {
+        a: A
+      }
+
+      type A {
+        foo: String
+        bar: String
+      }
+    `);
+
+    describe('when emitLegacyCommonJSImports is true', () => {
+      it('does not append `.js` to Operations import path', () => {
+        const fileName = 'fooBarQuery';
+        const importPath = `src/queries/${fileName}`;
+
+        const document = parse(
+          `query fooBarQuery {
+            a {
+              foo
+              bar
+            }
+          }
+        `
+        );
+
+        const visitor = new ClientSideBaseVisitor(
+          schema,
+          [],
+          {
+            emitLegacyCommonJSImports: true,
+            importDocumentNodeExternallyFrom: 'near-operation-file',
+            documentMode: DocumentMode.external,
+          },
+          {},
+          [{ document, location: importPath }]
+        );
+
+        visitor.OperationDefinition(document.definitions[0] as OperationDefinitionNode);
+
+        const imports = visitor.getImports();
+        expect(imports[0]).toBe(`import * as Operations from './${fileName}';`);
+      });
+    });
+
+    describe('when emitLegacyCommonJSImports is false', () => {
+      it('appends `.js` to Operations import path', () => {
+        const fileName = 'fooBarQuery';
+        const importPath = `src/queries/${fileName}`;
+
+        const document = parse(
+          `query fooBarQuery {
+            a {
+              foo
+              bar
+            }
+          }
+        `
+        );
+
+        const visitor = new ClientSideBaseVisitor(
+          schema,
+          [],
+          {
+            emitLegacyCommonJSImports: false,
+            importDocumentNodeExternallyFrom: 'near-operation-file',
+            documentMode: DocumentMode.external,
+          },
+          {},
+          [{ document, location: importPath }]
+        );
+
+        visitor.OperationDefinition(document.definitions[0] as OperationDefinitionNode);
+
+        const imports = visitor.getImports();
+        expect(imports[0]).toBe(`import * as Operations from './${fileName}.js';`);
+      });
+    });
+  });
+});