fix: Don't generate invalid type names with mergeFragmentTypes (#9369)

* fix: Don't generate invalid type names with mergeFragmentTypes The behavior was depentent on the default pascalCase namingConvention. We now apply similar removal of quotes and special characters out of the box, ensuring we keep functioning even if "keep" is selected as the naming convention. * changes
dotansimha · May 12, 2023 · 5950f5a · 5950f5a
1 parent a7dda35
commit 5950f5a
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 13 deletions.
diff --git a/.changeset/thin-berries-deny.md b/.changeset/thin-berries-deny.md
@@ -0,0 +1,5 @@
+---
+'@graphql-codegen/visitor-plugin-common': patch
+---
+
+Output valid type names with mergeFragmentTypes
diff --git a/packages/plugins/other/visitor-plugin-common/src/selection-set-to-object.ts b/packages/plugins/other/visitor-plugin-common/src/selection-set-to-object.ts
@@ -459,10 +459,13 @@ export class SelectionSetToObject<Config extends ParsedDocumentsConfig = ParsedD
         // then don't have a typename for naming the fragment.
         acc[
           selectedTypes.length <= 3
-            ? selectedTypes.join('_')
+            ? // Remove quote marks to produce a valid type name
+              selectedTypes.map(t => t.replace(/'/g, '')).join('_')
             : createHash('sha256')
                 .update(selectedTypes.join() || transformedSet || '')
+                // Remove invalid characters to produce a valid type name
                 .digest('base64')
+                .replace(/[=+/]/g, '')
         ] = [transformedSet];
       }
       return acc;

diff --git a/packages/plugins/typescript/operations/tests/ts-documents.spec.ts b/packages/plugins/typescript/operations/tests/ts-documents.spec.ts
@@ -2227,15 +2227,15 @@ describe('TypeScript Operations Plugin', () => {
           id
         }
       `);
-      const config = { preResolveTypes: true, mergeFragmentTypes: true };
+      const config = { preResolveTypes: true, mergeFragmentTypes: true, namingConvention: 'keep' };
       const { content } = await plugin(schema, [{ location: 'test-file.ts', document: ast }], config, {
         outputFile: '',
       });
 
       expect(content).toBeSimilarStringTo(`
-        export type TestQueryVariables = Exact<{ [key: string]: never; }>;
+        export type testQueryVariables = Exact<{ [key: string]: never; }>;
 
-        export type TestQuery = (
+        export type testQuery = (
           { notifications: Array<(
             { id: string }
             & { __typename?: 'TextNotification' | 'ImageNotification' }
@@ -2260,7 +2260,7 @@ describe('TypeScript Operations Plugin', () => {
           }
         }
       `);
-      const config = { preResolveTypes: true, mergeFragmentTypes: true };
+      const config = { preResolveTypes: true, mergeFragmentTypes: true, namingConvention: 'keep' };
       const { content } = await plugin(schema, [{ location: 'test-file.ts', document: ast }], config, {
         outputFile: '',
       });
@@ -2321,7 +2321,7 @@ describe('TypeScript Operations Plugin', () => {
           }
         }
       `);
-      const config = { preResolveTypes: true, mergeFragmentTypes: true };
+      const config = { preResolveTypes: true, mergeFragmentTypes: true, namingConvention: 'keep' };
       const { content } = await plugin(testSchema, [{ location: 'test-file.ts', document: ast }], config, {
         outputFile: '',
       });
@@ -2332,12 +2332,12 @@ describe('TypeScript Operations Plugin', () => {
            & { __typename?: 'A' }
          );
 
-         type N_ZhJjUzpMTyh98zugnx0IKwiLetPNjV8KYbSlmpAeuu_Fragment = (
+         type N_zhJJUzpMTyh98zugnx0IKwiLetPNjV8KybSlmpAEUU_Fragment = (
            { id: string }
            & { __typename?: 'B' | 'C' | 'D' | 'E' }
          );
 
-         export type NFragment = N_A_Fragment | N_ZhJjUzpMTyh98zugnx0IKwiLetPNjV8KYbSlmpAeuu_Fragment;
+         export type NFragment = N_A_Fragment | N_zhJJUzpMTyh98zugnx0IKwiLetPNjV8KybSlmpAEUU_Fragment;
       `);
       await validate(content, config);
     });
@@ -2352,7 +2352,7 @@ describe('TypeScript Operations Plugin', () => {
           }
         }
       `);
-      const config = { preResolveTypes: true, mergeFragmentTypes: true };
+      const config = { preResolveTypes: true, mergeFragmentTypes: true, namingConvention: 'keep' };
       const { content } = await plugin(schema, [{ location: 'test-file.ts', document: ast }], config, {
         outputFile: '',
       });
@@ -2381,15 +2381,15 @@ describe('TypeScript Operations Plugin', () => {
           id
         }
       `);
-      const config = { preResolveTypes: true, skipTypename: true, mergeFragmentTypes: true };
+      const config = { preResolveTypes: true, skipTypename: true, mergeFragmentTypes: true, namingConvention: 'keep' };
       const { content } = await plugin(schema, [{ location: 'test-file.ts', document: ast }], config, {
         outputFile: '',
       });
 
       expect(content).toBeSimilarStringTo(`
-        export type TestQueryVariables = Exact<{ [key: string]: never; }>;
+        export type testQueryVariables = Exact<{ [key: string]: never; }>;
 
-        export type TestQuery = { notifications: Array<{ id: string }> };
+        export type testQuery = { notifications: Array<{ id: string }> };
       `);
       await validate(content, config);
     });
@@ -2403,7 +2403,7 @@ describe('TypeScript Operations Plugin', () => {
           }
         }
       `);
-      const config = { preResolveTypes: true, skipTypename: true, mergeFragmentTypes: true };
+      const config = { preResolveTypes: true, skipTypename: true, mergeFragmentTypes: true, namingConvention: 'keep' };
       const { content } = await plugin(schema, [{ location: 'test-file.ts', document: ast }], config, {
         outputFile: '',
       });