Preserve .js extension when importDocumentNodeExternallyFrom and emit…

…LegacyCommonJSImports is false (#8895)

.changeset/quick-carpets-teach.md

@@ -0,0 +1,5 @@
+---
+'@graphql-codegen/visitor-plugin-common': patch
+---
+
+Preserve .js extension when importDocumentNodeExternallyFrom and emitLegacyCommonJSImports is false

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

@@ -542,6 +542,10 @@ export class ClientSideBaseVisitor<
   private clearExtension(path: string): string {
     const extension = extname(path);
 
+    if (!this.config.emitLegacyCommonJSImports && extension === '.js') {
+      return path;
+    }
+
     if (EXTENSIONS_TO_REMOVE.includes(extension)) {
       return path.replace(/\.[^/.]+$/, '');
     }

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

@@ -82,4 +82,51 @@ describe('getImports', () => {
       });
     });
   });
+
+  describe('when documentMode "external", importDocumentNodeExternallyFrom is relative path', () => {
+    const schema = buildSchema(/* GraphQL */ `
+      type Query {
+        a: A
+      }
+
+      type A {
+        foo: String
+        bar: String
+      }
+    `);
+
+    describe('when emitLegacyCommonJSImports is false', () => {
+      it('preserves `.js` on Operations import path', () => {
+        const fileName = 'fooBarQuery';
+        const importPath = `./src/queries/${fileName}.js`;
+
+        const document = parse(
+          `query fooBarQuery {
+            a {
+              foo
+              bar
+            }
+          }
+        `
+        );
+
+        const visitor = new ClientSideBaseVisitor(
+          schema,
+          [],
+          {
+            emitLegacyCommonJSImports: false,
+            importDocumentNodeExternallyFrom: importPath,
+            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 '${importPath}';`);
+      });
+    });
+  });
 });