fix: add __typename property (#6)

Add `__typename` property to mock data. This can be added if you set in
the config `addTypename: true`

Author: ardeois

README.md

@@ -14,6 +14,10 @@
 
 Defines the file path containing all GraphQL types. This file can also be generated through graphql-codgen
 
+### addTypename (`boolean`, defaultValue: `false`)
+
+Adds `__typename` property to mock data
+
 ## Example of usage
 
 **codegen.yml**

src/index.ts

@@ -83,18 +83,20 @@ const generateMockValue = (
     }
 };
 
-const getMockString = (typeName: string, fields: string) => {
+const getMockString = (typeName: string, fields: string, addTypename = false) => {
+    const typename = addTypename ? `\n        __typename: '${typeName}',` : '';
     return `
 export const ${toMockName(typeName)} = (overrides?: Partial<${typeName}>): ${typeName} => {
-    return {
+    return {${typename}
 ${fields}
         ...overrides
     };
 };`;
-}
+};
 
 export interface TypescriptMocksPluginConfig {
     typesFile?: string;
+    addTypename?: boolean;
 }
 
 interface TypeItem {
@@ -153,13 +155,17 @@ export const plugin: PluginFunction<TypescriptMocksPluginConfig> = (schema, docu
             return {
                 typeName: fieldName,
                 mockFn: () => {
-                    const mockFields = node.fields ? node.fields.map((field) => {
-                        const value = generateMockValue(fieldName, field.name.value, types, field.type);
+                    const mockFields = node.fields
+                        ? node.fields
+                              .map(field => {
+                                  const value = generateMockValue(fieldName, field.name.value, types, field.type);
 
-                        return `        ${field.name.value}: ${value},`;
-                    }).join('\n') : '';
+                                  return `        ${field.name.value}: ${value},`;
+                              })
+                              .join('\n')
+                        : '';
 
-                    return getMockString(fieldName, mockFields);
+                    return getMockString(fieldName, mockFields, false);
                 },
             };
         },
@@ -177,7 +183,7 @@ export const plugin: PluginFunction<TypescriptMocksPluginConfig> = (schema, docu
                 mockFn: () => {
                     const mockFields = fields ? fields.map(({ mockFn }: any) => mockFn(typeName)).join('\n') : '';
 
-                    return getMockString(typeName, mockFields);
+                    return getMockString(typeName, mockFields, !!config.addTypename);
                 },
             };
         },

tests/__snapshots__/typescript-mock-data.spec.ts.snap

@@ -61,3 +61,37 @@ export const aUser = (overrides?: Partial<User>): User => {
 };
 "
 `;
+
+exports[`should generate mock data with typename if addTypename is true 1`] = `
+"/* eslint-disable @typescript-eslint/no-use-before-define,@typescript-eslint/no-unused-vars */
+import { Avatar, UpdateUserInput, User } from './types/graphql';
+
+export const anAvatar = (overrides?: Partial<Avatar>): Avatar => {
+    return {
+        __typename: 'Avatar',
+        id: '0550ff93-dd31-49b4-8c38-ff1cb68bdc38',
+        url: 'aliquid',
+        ...overrides
+    };
+};
+
+export const aUpdateUserInput = (overrides?: Partial<UpdateUserInput>): UpdateUserInput => {
+    return {
+        id: '1d6a9360-c92b-4660-8e5f-04155047bddc',
+        login: 'qui',
+        avatar: anAvatar(),
+        ...overrides
+    };
+};
+
+export const aUser = (overrides?: Partial<User>): User => {
+    return {
+        __typename: 'User',
+        id: 'a5756f00-41a6-422a-8a7d-d13ee6a63750',
+        login: 'libero',
+        avatar: anAvatar(),
+        ...overrides
+    };
+};
+"
+`;

tests/typescript-mock-data.spec.ts

@@ -48,3 +48,11 @@ it('should generate mock data functions with external types file import', async
     expect(result).toContain("import { Avatar, UpdateUserInput, User } from './types/graphql';");
     expect(result).toMatchSnapshot();
 });
+
+it('should generate mock data with typename if addTypename is true', async () => {
+    const result = await plugin(testSchema, [], { typesFile: './types/graphql.ts', addTypename: true });
+
+    expect(result).toBeDefined();
+    expect(result).toContain("import { Avatar, UpdateUserInput, User } from './types/graphql';");
+    expect(result).toMatchSnapshot();
+});