Fix double imports (#6548)

* Deduplicate generated imports

* Generate changeset

* Add comments; remove unnecessary imports

Author: nbudin

.changeset/shiny-eels-smell.md

@@ -0,0 +1,5 @@
+---
+'@graphql-codegen/visitor-plugin-common': patch
+---
+
+Don't generate duplicate imports for the same identifier

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

@@ -502,7 +502,35 @@ export class ClientSideBaseVisitor<
         documentMode === DocumentMode.string ||
         documentMode === DocumentMode.documentNodeImportFragments
       ) {
-        fragmentImports.forEach(fragmentImport => {
+        // keep track of what imports we've already generated so we don't try
+        // to import the same identifier twice
+        const alreadyImported = new Map<string, Set<string>>();
+
+        const deduplicatedImports = fragmentImports
+          .map(fragmentImport => {
+            const { path, identifiers } = fragmentImport.importSource;
+            if (!alreadyImported.has(path)) {
+              alreadyImported.set(path, new Set<string>());
+            }
+
+            const alreadyImportedForPath = alreadyImported.get(path);
+            const newIdentifiers = identifiers.filter(identifier => !alreadyImportedForPath.has(identifier.name));
+            newIdentifiers.forEach(newIdentifier => alreadyImportedForPath.add(newIdentifier.name));
+
+            // filter the set of identifiers in this fragment import to only
+            // the ones we haven't already imported from this path
+            return {
+              ...fragmentImport,
+              importSource: {
+                ...fragmentImport.importSource,
+                identifiers: newIdentifiers,
+              },
+            };
+          })
+          // remove any imports that now have no identifiers in them
+          .filter(fragmentImport => fragmentImport.importSource.identifiers.length > 0);
+
+        deduplicatedImports.forEach(fragmentImport => {
           if (fragmentImport.outputPath !== fragmentImport.importSource.path) {
             this._imports.add(generateFragmentImportStatement(fragmentImport, 'document'));
           }

packages/presets/near-operation-file/tests/fixtures/issue-6546-fragments.ts

@@ -0,0 +1,16 @@
+import gql from 'graphql-tag';
+
+export const usernameFragment = gql`
+  fragment usernameFragment on User {
+    username
+  }
+`;
+
+export const userFields = gql`
+  fragment userFields on User {
+    ...usernameFragment
+    email
+  }
+
+  ${usernameFragment}
+`;

packages/presets/near-operation-file/tests/fixtures/issue-6546-queries.ts

@@ -0,0 +1,27 @@
+import gql from 'graphql-tag';
+import { userFields, usernameFragment } from './issue-6546-fragments';
+
+export const limitedUserFieldsQuery = gql`
+  query user {
+    user(id: "1") {
+      ...usernameFragment
+    }
+  }
+
+  ${usernameFragment}
+`;
+
+export const userAndFriendQuery = gql`
+  query allUserFields {
+    user(id: "1") {
+      ...userFields
+    }
+
+    friend: user(id: "2") {
+      ...usernameFragment
+    }
+  }
+
+  ${userFields}
+  ${usernameFragment}
+`;

packages/presets/near-operation-file/tests/near-operation-file.spec.ts

@@ -447,6 +447,41 @@ export type CQuery = { __typename?: 'Query', a?: Types.Maybe<string> };
 
       expect(result[0].content).not.toMatch(`import { UserFieldsFragmentDoc }`);
     });
+
+    it('#6546 - duplicate fragment imports', async () => {
+      const result = await executeCodegen({
+        schema: [
+          /* GraphQL */ `
+            type Query {
+              user(id: String!): User!
+            }
+
+            type User {
+              id: String!
+              email: String
+              username: String
+            }
+          `,
+        ],
+        documents: [
+          path.join(__dirname, 'fixtures/issue-6546-queries.ts'),
+          path.join(__dirname, 'fixtures/issue-6546-fragments.ts'),
+        ],
+        generates: {
+          'out1.ts': {
+            preset: preset,
+            presetConfig: {
+              baseTypesPath: 'types.ts',
+            },
+            plugins: ['typescript-operations', 'typescript-react-apollo'],
+          },
+        },
+      });
+
+      const queriesContent = result.find(generatedDoc => generatedDoc.filename.match(/issue-6546-queries/)).content;
+      const imports = queriesContent.match(/import.*UsernameFragmentFragmentDoc/g);
+      expect(imports).toHaveLength(1);
+    });
   });
 
   it('Should build the correct operation files paths', async () => {