@khanacademy/graphql-flow 0.1.0 → 0.2.2

package/src/generateResponseType.js

@@ -7,6 +7,7 @@ import type {
     FieldNode,
     IntrospectionOutputTypeRef,
     OperationDefinitionNode,
+    FragmentDefinitionNode,
 } from 'graphql';
 import type {Config, Schema, Selections} from './types';
 import {
@@ -21,7 +22,7 @@ import type {
     IntrospectionObjectType,
     IntrospectionUnionType,
 } from 'graphql/utilities/introspectionQuery';
-import type {
+import {
     BabelNodeObjectTypeProperty,
     BabelNodeObjectTypeSpreadProperty,
 } from '@babel/types';
@@ -43,6 +44,77 @@ export const generateResponseType = (
     return generate(ast).code;
 };
 
+const sortedObjectTypeAnnotation = (
+    config: Config,
+    properties: Array<
+        BabelNodeObjectTypeProperty | BabelNodeObjectTypeSpreadProperty,
+    >,
+) => {
+    const obj = babelTypes.objectTypeAnnotation(
+        properties.sort((a, b) => {
+            if (
+                a.type === 'ObjectTypeProperty' &&
+                b.type === 'ObjectTypeProperty'
+            ) {
+                const aName = a.key.type === 'Identifier' ? a.key.name : '';
+                const bName = b.key.type === 'Identifier' ? b.key.name : '';
+                return aName < bName ? -1 : 1;
+            }
+            return 0;
+        }),
+        undefined /* indexers */,
+        undefined /* callProperties */,
+        undefined /* internalSlots */,
+        true /* exact */,
+    );
+    const name = config.path.join('_');
+    const isTopLevelType = config.path.length <= 1;
+    if (config.allObjectTypes != null && !isTopLevelType) {
+        config.allObjectTypes[name] = obj;
+        return babelTypes.genericTypeAnnotation(babelTypes.identifier(name));
+    } else {
+        return obj;
+    }
+};
+
+export const generateFragmentType = (
+    schema: Schema,
+    fragment: FragmentDefinitionNode,
+    config: Config,
+): string => {
+    const onType = fragment.typeCondition.name.value;
+    let ast;
+
+    if (schema.typesByName[onType]) {
+        ast = sortedObjectTypeAnnotation(
+            config,
+            objectPropertiesToFlow(
+                config,
+                schema.typesByName[onType],
+                onType,
+                fragment.selectionSet.selections,
+            ),
+        );
+    } else if (schema.interfacesByName[onType]) {
+        ast = unionOrInterfaceToFlow(
+            config,
+            config.schema.interfacesByName[onType],
+            fragment.selectionSet.selections,
+        );
+    } else if (schema.unionsByName[onType]) {
+        ast = unionOrInterfaceToFlow(
+            config,
+            config.schema.unionsByName[onType],
+            fragment.selectionSet.selections,
+        );
+    } else {
+        throw new Error(`Unknown ${onType}`);
+    }
+
+    // eslint-disable-next-line flowtype-errors/uncovered
+    return generate(ast).code;
+};
+
 const _typeToFlow = (
     config: Config,
     type,
@@ -132,35 +204,45 @@ export const typeToFlow = (
     return transferLeadingComments(inner, result);
 };
 
+const ensureOnlyOneTypenameProperty = (properties) => {
+    let seenTypeName: false | string = false;
+    return properties.filter((type) => {
+        // The apollo-utilities "addTypeName" utility will add it
+        // even if it's already specified :( so we have to filter out
+        // the extra one here.
+        if (
+            type.type === 'ObjectTypeProperty' &&
+            type.key.name === '__typename'
+        ) {
+            const name =
+                type.value.type === 'StringLiteralTypeAnnotation'
+                    ? type.value.value
+                    : 'INVALID';
+            if (seenTypeName) {
+                if (name !== seenTypeName) {
+                    throw new Error(
+                        `Got two different type names ${name}, ${seenTypeName}`,
+                    );
+                }
+                return false;
+            }
+            seenTypeName = name;
+        }
+        return true;
+    });
+};
+
 const querySelectionToObjectType = (
     config: Config,
     selections,
     type,
     typeName: string,
 ): BabelNodeFlowType => {
-    let seenTypeName = false;
-    return babelTypes.objectTypeAnnotation(
-        objectPropertiesToFlow(config, type, typeName, selections).filter(
-            (type) => {
-                // The apollo-utilities "addTypeName" utility will add it
-                // even if it's already specified :( so we have to filter out
-                // the extra one here.
-                if (
-                    type.type === 'ObjectTypeProperty' &&
-                    type.key.name === '__typename'
-                ) {
-                    if (seenTypeName) {
-                        return false;
-                    }
-                    seenTypeName = true;
-                }
-                return true;
-            },
+    return sortedObjectTypeAnnotation(
+        config,
+        ensureOnlyOneTypenameProperty(
+            objectPropertiesToFlow(config, type, typeName, selections),
         ),
-        undefined /* indexers */,
-        undefined /* callProperties */,
-        undefined /* internalSlots */,
-        true /* exact */,
     );
 };
 
@@ -178,6 +260,9 @@ export const objectPropertiesToFlow = (
                 case 'InlineFragment': {
                     const newTypeName =
                         selection.typeCondition?.name.value ?? typeName;
+                    if (newTypeName !== typeName) {
+                        return [];
+                    }
                     return objectPropertiesToFlow(
                         config,
                         config.schema.typesByName[newTypeName],
@@ -245,7 +330,10 @@ export const objectPropertiesToFlow = (
                                 babelTypes.objectTypeProperty(
                                     babelTypes.identifier(alias),
                                     typeToFlow(
-                                        config,
+                                        {
+                                            ...config,
+                                            path: config.path.concat([alias]),
+                                        },
                                         typeField.type,
                                         selection,
                                     ),
@@ -274,54 +362,117 @@ export const unionOrInterfaceToFlow = (
           }),
     selections: Selections,
 ): BabelNodeFlowType => {
-    const selectedAttributes: Array<
-        Array<BabelNodeObjectTypeProperty | BabelNodeObjectTypeSpreadProperty>,
-    > = type.possibleTypes.map((possible) => {
-        let seenTypeName = false;
-        return selections
-            .map((selection) =>
-                unionOrInterfaceSelection(config, type, possible, selection),
-            )
-            .flat()
-            .filter((type) => {
-                // The apollo-utilities "addTypeName" utility will add it
-                // even if it's already specified :( so we have to filter out
-                // the extra one here.
-                if (
-                    type.type === 'ObjectTypeProperty' &&
-                    type.key.name === '__typename'
-                ) {
-                    if (seenTypeName) {
-                        return false;
-                    }
-                    seenTypeName = true;
-                }
-                return true;
-            });
-    });
     const allFields = selections.every(
         (selection) => selection.kind === 'Field',
     );
-    if (selectedAttributes.length === 1 || allFields) {
-        return babelTypes.objectTypeAnnotation(
-            selectedAttributes[0],
-            undefined /* indexers */,
-            undefined /* callProperties */,
-            undefined /* internalSlots */,
-            true /* exact */,
+    const selectedAttributes: Array<{
+        attributes: Array<
+            BabelNodeObjectTypeProperty | BabelNodeObjectTypeSpreadProperty,
+        >,
+        typeName: string,
+    }> = type.possibleTypes
+        .slice()
+        .sort((a, b) => {
+            return a.name < b.name ? -1 : 1;
+        })
+        .map((possible) => {
+            const configWithUpdatedPath = {
+                ...config,
+                path: allFields
+                    ? config.path
+                    : config.path.concat([possible.name]),
+            };
+            return {
+                typeName: possible.name,
+                attributes: ensureOnlyOneTypenameProperty(
+                    selections
+                        .map((selection) =>
+                            unionOrInterfaceSelection(
+                                configWithUpdatedPath,
+                                type,
+                                possible,
+                                selection,
+                            ),
+                        )
+                        .flat(),
+                ),
+            };
+        });
+    // If they're all fields, the only selection that could be different is __typename
+    if (allFields) {
+        const sharedAttributes = selectedAttributes[0].attributes.slice();
+        const typeNameIndex = selectedAttributes[0].attributes.findIndex(
+            (x) =>
+                x.type === 'ObjectTypeProperty' &&
+                x.key.type === 'Identifier' &&
+                x.key.name === '__typename',
         );
+        if (typeNameIndex !== -1) {
+            sharedAttributes[typeNameIndex] = babelTypes.objectTypeProperty(
+                babelTypes.identifier('__typename'),
+                babelTypes.unionTypeAnnotation(
+                    selectedAttributes.map(
+                        (attrs) =>
+                            // eslint-disable-next-line flowtype-errors/uncovered
+                            ((attrs.attributes[
+                                typeNameIndex
+                            ]: any): BabelNodeObjectTypeProperty).value,
+                    ),
+                ),
+            );
+        }
+        return sortedObjectTypeAnnotation(config, sharedAttributes);
     }
-    return babelTypes.unionTypeAnnotation(
-        selectedAttributes.map((properties) =>
-            babelTypes.objectTypeAnnotation(
-                properties,
-                undefined /* indexers */,
-                undefined /* callProperties */,
-                undefined /* internalSlots */,
-                true /* exact */,
+    if (selectedAttributes.length === 1) {
+        return sortedObjectTypeAnnotation(
+            config,
+            selectedAttributes[0].attributes,
+        );
+    }
+    /**
+     * When generating the objects for the sub-options of a union, the path needs
+     * to include the name of the object type.
+     * ```
+     * query getFriend {
+     *     friend {
+     *         ... on Human { id }
+     *         ... on Droid { arms }
+     *     }
+     * }
+     * ```
+     * produces
+     * ```
+     * type getFriend = {friend: getFriend_friend_Human | getFriend_friend_Droid }
+     * type getFriend_friend_Human = {id: string}
+     * type getFriend_friend_Droid = {arms: number}
+     * ```
+     * Note that this is different from when an attribute has a plain object type.
+     * ```
+     * query getHuman {
+     *     me: human(id: "me") { id }
+     * }
+     * ```
+     * produces
+     * ```
+     * type getHuman = {me: getHuman_me}
+     * type getHuman_me = {id: string}
+     * ```
+     * instead of e.g. `getHuman_me_Human`.
+     */
+    const result = babelTypes.unionTypeAnnotation(
+        selectedAttributes.map(({typeName, attributes}) =>
+            sortedObjectTypeAnnotation(
+                {...config, path: config.path.concat([typeName])},
+                attributes,
             ),
         ),
     );
+    const name = config.path.join('_');
+    if (config.allObjectTypes && config.path.length > 1) {
+        config.allObjectTypes[name] = result;
+        return babelTypes.genericTypeAnnotation(babelTypes.identifier(name));
+    }
+    return result;
 };
 const unionOrInterfaceSelection = (
     config,
@@ -367,13 +518,20 @@ const unionOrInterfaceSelection = (
             liftLeadingPropertyComments(
                 babelTypes.objectTypeProperty(
                     babelTypes.identifier(alias),
-                    typeToFlow(config, typeField.type, selection),
+                    typeToFlow(
+                        {...config, path: config.path.concat([name])},
+                        typeField.type,
+                        selection,
+                    ),
                 ),
             ),
         ];
     }
     if (selection.kind === 'FragmentSpread') {
         const fragment = config.fragments[selection.name.value];
+        if (!fragment) {
+            throw new Error(`Unknown fragment ${selection.name.value}`);
+        }
         const typeName = fragment.typeCondition.name.value;
         if (
             (config.schema.interfacesByName[typeName] &&

package/src/generateTypeFiles.js

@@ -2,6 +2,9 @@
 // Import this in your jest setup, to mock out graphql-tag!
 import type {DocumentNode} from 'graphql';
 import type {Options, Schema, Scalars} from './types';
+import fs from 'fs';
+import path from 'path';
+import {documentToFlowTypes} from '.';
 
 export type ExternalOptions = {
     pragma?: string,
@@ -14,9 +17,12 @@ export type ExternalOptions = {
      */
     regenerateCommand?: string,
     readOnlyArray?: boolean,
+    splitTypes?: boolean,
+    generatedDirectory?: string,
+    exportAllObjectTypes?: boolean,
 };
 
-const indexPrelude = (regenerateCommand?: string) => `// @flow
+export const indexPrelude = (regenerateCommand?: string): string => `// @flow
 //
 // AUTOGENERATED
 // NOTE: New response types are added to this file automatically.
@@ -26,61 +32,42 @@ const indexPrelude = (regenerateCommand?: string) => `// @flow
 
 `;
 
-export const generateTypeFiles = (
+export const generateTypeFileContents = (
     fileName: string,
     schema: Schema,
     document: DocumentNode,
     options: Options,
-) => {
-    const {documentToFlowTypes} = require('.');
-    const path = require('path');
-    const fs = require('fs');
-
-    const indexFile = (generatedDir) => path.join(generatedDir, 'index.js');
-
-    const maybeCreateGeneratedDir = (generatedDir) => {
-        if (!fs.existsSync(generatedDir)) {
-            fs.mkdirSync(generatedDir, {recursive: true});
-
-            // Now write an index.js for each __generated__ dir.
-            fs.writeFileSync(
-                indexFile(generatedDir),
-                indexPrelude(options.regenerateCommand),
-            );
-        }
-    };
+    generatedDir: string,
+    indexContents: string,
+): {indexContents: string, files: {[key: string]: string}} => {
+    const files = {};
 
     /// Write export for __generated__/index.js if it doesn't exist
-    const writeToIndex = (filePath, typeName) => {
-        const index = indexFile(path.dirname(filePath));
-        const indexContents = fs.readFileSync(index, 'utf8');
+    const addToIndex = (filePath, typeName) => {
         const newLine = `export type {${typeName}} from './${path.basename(
             filePath,
         )}';`;
-        if (indexContents.indexOf(path.basename(filePath)) === -1) {
-            fs.appendFileSync(index, newLine + '\n');
+        if (indexContents.indexOf('./' + path.basename(filePath)) === -1) {
+            indexContents += newLine + '\n';
         } else {
             const lines = indexContents.split('\n').map((line) => {
-                if (line.includes(path.basename(filePath))) {
+                if (line.includes('./' + path.basename(filePath))) {
                     return newLine;
                 }
                 return line;
             });
-            fs.writeFileSync(index, lines.join('\n'));
+            indexContents = lines.join('\n');
         }
     };
 
     const generated = documentToFlowTypes(document, schema, options);
-    generated.forEach(({name, typeName, code}) => {
+    generated.forEach(({name, typeName, code, isFragment, extraTypes}) => {
         // We write all generated files to a `__generated__` subdir to keep
         // things tidy.
-        const targetFileName = `${typeName}.js`;
-        const generatedDir = path.join(path.dirname(fileName), '__generated__');
+        const targetFileName = `${name}.js`;
         const targetPath = path.join(generatedDir, targetFileName);
 
-        maybeCreateGeneratedDir(generatedDir);
-
-        const fileContents =
+        let fileContents =
             '// @' +
             `flow\n// AUTOGENERATED -- DO NOT EDIT\n` +
             `// Generated for operation '${name}' in file '../${path.basename(
@@ -90,10 +77,60 @@ export const generateTypeFiles = (
                 ? `// To regenerate, run '${options.regenerateCommand}'.\n`
                 : '') +
             code;
-        fs.writeFileSync(targetPath, fileContents);
+        if (options.splitTypes && !isFragment) {
+            fileContents +=
+                `\nexport type ${name} = ${typeName}['response'];\n` +
+                `export type ${name}Variables = ${typeName}['variables'];\n`;
+        }
+        Object.keys(extraTypes).forEach((name) => {
+            fileContents += `\n\nexport type ${name} = ${extraTypes[name]};`;
+        });
 
-        writeToIndex(targetPath, typeName);
+        addToIndex(targetPath, typeName);
+        files[targetPath] =
+            fileContents
+                // Remove whitespace from the ends of lines; babel's generate sometimes
+                // leaves them hanging around.
+                .replace(/\s+$/gm, '') + '\n';
     });
+
+    return {files, indexContents};
+};
+
+export const generateTypeFiles = (
+    fileName: string,
+    schema: Schema,
+    document: DocumentNode,
+    options: Options,
+) => {
+    const generatedDir = path.join(
+        path.dirname(fileName),
+        options.generatedDirectory ?? '__generated__',
+    );
+    const indexFile = path.join(generatedDir, 'index.js');
+
+    if (!fs.existsSync(generatedDir)) {
+        fs.mkdirSync(generatedDir, {recursive: true});
+    }
+    if (!fs.existsSync(indexFile)) {
+        fs.writeFileSync(indexFile, indexPrelude(options.regenerateCommand));
+    }
+
+    const {indexContents, files} = generateTypeFileContents(
+        fileName,
+        schema,
+        document,
+        options,
+        generatedDir,
+        fs.readFileSync(indexFile, 'utf8'),
+    );
+
+    fs.writeFileSync(indexFile, indexContents);
+    Object.keys(files).forEach((key) => {
+        fs.writeFileSync(key, files[key]);
+    });
+
+    fs.writeFileSync(indexFile, indexContents);
 };
 
 export const processPragmas = (
@@ -120,6 +157,9 @@ export const processPragmas = (
                 : autogenStrict || !autogen,
             readOnlyArray: options.readOnlyArray,
             scalars: options.scalars,
+            splitTypes: options.splitTypes,
+            generatedDirectory: options.generatedDirectory,
+            exportAllObjectTypes: options.exportAllObjectTypes,
         };
     } else {
         return null;

package/src/index.js

@@ -9,7 +9,11 @@
  */
 import type {DefinitionNode, DocumentNode} from 'graphql';
 
-import {generateResponseType} from './generateResponseType';
+import generate from '@babel/generator'; // eslint-disable-line flowtype-errors/uncovered
+import {
+    generateFragmentType,
+    generateResponseType,
+} from './generateResponseType';
 import {generateVariablesType} from './generateVariablesType';
 export {spyOnGraphqlTagToCollectQueries} from './jest-mock-graphql-tag';
 
@@ -36,6 +40,8 @@ const optionsToConfig = (
         fragments,
         schema,
         errors,
+        allObjectTypes: null,
+        path: [],
         ...internalOptions,
     };
 
@@ -58,6 +64,8 @@ export const documentToFlowTypes = (
     name: string,
     typeName: string,
     code: string,
+    isFragment?: boolean,
+    extraTypes: {[key: string]: string},
 }> => {
     const errors: Array<string> = [];
     const config = optionsToConfig(
@@ -68,21 +76,63 @@ export const documentToFlowTypes = (
     );
     const result = document.definitions
         .map((item) => {
+            if (item.kind === 'FragmentDefinition') {
+                const name = item.name.value;
+                const types = {};
+                const code = `export type ${name} = ${generateFragmentType(
+                    schema,
+                    item,
+                    {
+                        ...config,
+                        path: [name],
+                        allObjectTypes: options?.exportAllObjectTypes
+                            ? types
+                            : null,
+                    },
+                )};`;
+                const extraTypes: {[key: string]: string} = {};
+                Object.keys(types).forEach((k) => {
+                    // eslint-disable-next-line flowtype-errors/uncovered
+                    extraTypes[k] = generate(types[k]).code;
+                });
+                return {
+                    name,
+                    typeName: name,
+                    code,
+                    isFragment: true,
+                    extraTypes,
+                };
+            }
             if (
                 item.kind === 'OperationDefinition' &&
                 (item.operation === 'query' || item.operation === 'mutation') &&
                 item.name
             ) {
+                const types = {};
                 const name = item.name.value;
-                const response = generateResponseType(schema, item, config);
-                const variables = generateVariablesType(schema, item, config);
+                const response = generateResponseType(schema, item, {
+                    ...config,
+                    path: [name],
+                    allObjectTypes: options?.exportAllObjectTypes
+                        ? types
+                        : null,
+                });
+                const variables = generateVariablesType(schema, item, {
+                    ...config,
+                    path: [name],
+                });
 
                 const typeName = `${name}Type`;
                 // TODO(jared): Maybe make this template configurable?
                 // We'll see what's required to get webapp on board.
                 const code = `export type ${typeName} = {|\n    variables: ${variables},\n    response: ${response}\n|};`;
 
-                return {name, typeName, code};
+                const extraTypes: {[key: string]: string} = {};
+                Object.keys(types).forEach((k) => {
+                    // eslint-disable-next-line flowtype-errors/uncovered
+                    extraTypes[k] = generate(types[k]).code;
+                });
+                return {name, typeName, code, extraTypes};
             }
         })
         .filter(Boolean);

package/src/types.js

@@ -1,5 +1,6 @@
 // @flow
 
+import type {BabelNode} from '@babel/types';
 import type {
     FragmentDefinitionNode,
     IntrospectionEnumType,
@@ -18,6 +19,9 @@ export type Options = {|
     strictNullability?: boolean, // default true
     readOnlyArray?: boolean, // default true
     scalars?: Scalars,
+    splitTypes?: boolean,
+    generatedDirectory?: string,
+    exportAllObjectTypes?: boolean,
 |};
 
 export type Schema = {
@@ -44,6 +48,7 @@ export type Schema = {
 };
 
 export type Config = {
+    path: Array<string>,
     strictNullability: boolean,
     readOnlyArray: boolean,
     fragments: {[key: string]: FragmentDefinitionNode},
@@ -51,5 +56,6 @@ export type Config = {
     schema: Schema,
     scalars: Scalars,
     errors: Array<string>,
+    allObjectTypes: null | {[key: string]: BabelNode},
 };
 export type Scalars = {[key: string]: 'string' | 'number' | 'boolean'};