@khanacademy/graphql-flow 0.0.2 → 0.1.0

package/src/generateTypeFiles.js

@@ -0,0 +1,127 @@
+// @flow
+// Import this in your jest setup, to mock out graphql-tag!
+import type {DocumentNode} from 'graphql';
+import type {Options, Schema, Scalars} from './types';
+
+export type ExternalOptions = {
+    pragma?: string,
+    loosePragma?: string,
+    ignorePragma?: string,
+    scalars?: Scalars,
+    strictNullability?: boolean,
+    /**
+     * The command that users should run to regenerate the types files.
+     */
+    regenerateCommand?: string,
+    readOnlyArray?: boolean,
+};
+
+const indexPrelude = (regenerateCommand?: string) => `// @flow
+//
+// AUTOGENERATED
+// NOTE: New response types are added to this file automatically.
+//       Outdated response types can be removed manually as they are deprecated.
+//${regenerateCommand ? '      To regenerate, run ' + regenerateCommand : ''}
+//
+
+`;
+
+export const generateTypeFiles = (
+    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),
+            );
+        }
+    };
+
+    /// 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 newLine = `export type {${typeName}} from './${path.basename(
+            filePath,
+        )}';`;
+        if (indexContents.indexOf(path.basename(filePath)) === -1) {
+            fs.appendFileSync(index, newLine + '\n');
+        } else {
+            const lines = indexContents.split('\n').map((line) => {
+                if (line.includes(path.basename(filePath))) {
+                    return newLine;
+                }
+                return line;
+            });
+            fs.writeFileSync(index, lines.join('\n'));
+        }
+    };
+
+    const generated = documentToFlowTypes(document, schema, options);
+    generated.forEach(({name, typeName, code}) => {
+        // 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 targetPath = path.join(generatedDir, targetFileName);
+
+        maybeCreateGeneratedDir(generatedDir);
+
+        const fileContents =
+            '// @' +
+            `flow\n// AUTOGENERATED -- DO NOT EDIT\n` +
+            `// Generated for operation '${name}' in file '../${path.basename(
+                fileName,
+            )}'\n` +
+            (options.regenerateCommand
+                ? `// To regenerate, run '${options.regenerateCommand}'.\n`
+                : '') +
+            code;
+        fs.writeFileSync(targetPath, fileContents);
+
+        writeToIndex(targetPath, typeName);
+    });
+};
+
+export const processPragmas = (
+    options: ExternalOptions,
+    rawSource: string,
+): null | Options => {
+    if (options.ignorePragma && rawSource.includes(options.ignorePragma)) {
+        return null;
+    }
+
+    const autogen = options.loosePragma
+        ? rawSource.includes(options.loosePragma)
+        : false;
+    const autogenStrict = options.pragma
+        ? rawSource.includes(options.pragma)
+        : false;
+    const noPragmas = !options.loosePragma && !options.pragma;
+
+    if (autogen || autogenStrict || noPragmas) {
+        return {
+            regenerateCommand: options.regenerateCommand,
+            strictNullability: noPragmas
+                ? options.strictNullability
+                : autogenStrict || !autogen,
+            readOnlyArray: options.readOnlyArray,
+            scalars: options.scalars,
+        };
+    } else {
+        return null;
+    }
+};

package/src/jest-mock-graphql-tag.js

@@ -1,119 +1,16 @@
 // @flow
 // Import this in your jest setup, to mock out graphql-tag!
 import type {DocumentNode, IntrospectionQuery} from 'graphql';
-import type {Schema, Options, Scalars} from './types';
 import {validate} from 'graphql/validation';
 import {buildClientSchema} from 'graphql';
 import {print} from 'graphql/language/printer';
 import {addTypenameToDocument} from 'apollo-utilities'; // eslint-disable-line flowtype-errors/uncovered
 import {schemaFromIntrospectionData} from './schemaFromIntrospectionData';
-
-const indexPrelude = (regenerateCommand?: string) => `// @flow
-//
-// AUTOGENERATED
-// NOTE: New response types are added to this file automatically.
-//       Outdated response types can be removed manually as they are deprecated.
-//${regenerateCommand ? '      To regenerate, run ' + regenerateCommand : ''}
-//
-
-`;
-
-const generateTypeFiles = (
-    schema: Schema,
-    document: DocumentNode,
-    options: Options,
-) => {
-    const {documentToFlowTypes} = require('.');
-    const path = require('path');
-    const fs = require('fs');
-    const format: ({text: string}) => string = require('prettier-eslint'); // eslint-disable-line flowtype-errors/uncovered
-
-    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),
-            );
-        }
-    };
-
-    /// 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 newLine = `export type {${typeName}} from './${path.basename(
-            filePath,
-        )}';`;
-        if (indexContents.indexOf(path.basename(filePath)) === -1) {
-            fs.appendFileSync(index, newLine + '\n');
-        } else {
-            const lines = indexContents.split('\n').map((line) => {
-                if (line.includes(path.basename(filePath))) {
-                    return newLine;
-                }
-                return line;
-            });
-            fs.writeFileSync(index, lines.join('\n'));
-        }
-    };
-
-    // Get the name of the file that `gql` was called from
-    const errorLines = new Error().stack.split('\n');
-    const fileName = errorLines[3].split('(').slice(-1)[0].split(':')[0];
-
-    const generated = documentToFlowTypes(document, schema, options);
-    generated.forEach(({name, typeName, code}) => {
-        // 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 targetPath = path.join(generatedDir, targetFileName);
-
-        maybeCreateGeneratedDir(generatedDir);
-
-        // NOTE: Uncomment this to write the query definitions to disk if
-        // you need to add new features to the flow type generation
-        // fs.writeFileSync(
-        //     targetFileName + '.query',
-        //     JSON.stringify(definitions, null, 2),
-        // );
-        const fileContents = format({
-            text:
-                '// @' +
-                `flow\n// AUTOGENERATED -- DO NOT EDIT\n` +
-                `// Generated for operation '${name}' in file '../${path.basename(
-                    fileName,
-                )}'\n` +
-                (options.regenerateCommand
-                    ? `// To regenerate, run '${options.regenerateCommand}'.\n`
-                    : '') +
-                code,
-        });
-        fs.writeFileSync(targetPath, fileContents);
-
-        writeToIndex(targetPath, typeName);
-    });
-};
+import type {ExternalOptions} from './generateTypeFiles';
+import {generateTypeFiles, processPragmas} from './generateTypeFiles';
 
 type GraphqlTagFn = (raw: string, ...args: Array<any>) => DocumentNode;
 
-type SpyOptions = {
-    pragma?: string,
-    loosePragma?: string,
-    scalars?: Scalars,
-    strictNullability?: boolean,
-    /**
-     * The command that users should run to regenerate the types files.
-     */
-    regenerateCommand?: string,
-    readOnlyArray?: boolean,
-};
-
 /**
  * This function is expected to be called like so:
  *
@@ -133,11 +30,14 @@ type SpyOptions = {
  * If both pragma and loosePragma are empty, then all graphql
  * documents will be processed. Otherwise, only documents
  * with one of the pragmas will be processed.
+ * Any operations containing `ignorePragma` (if provided)
+ * will be skipped, regardless of whether they contain
+ * another specified pragma.
  */
 const spyOnGraphqlTagToCollectQueries = (
     realGraphqlTag: GraphqlTagFn,
     introspectionData: IntrospectionQuery,
-    options: SpyOptions = {},
+    options: ExternalOptions = {},
 ): GraphqlTagFn => {
     const collection: Array<{
         raw: string,
@@ -148,23 +48,42 @@ const spyOnGraphqlTagToCollectQueries = (
     const schema = schemaFromIntrospectionData(introspectionData);
 
     const wrapper = function gql() {
+        // Get the name of the file that `gql` was called from
+        const errorLines = new Error().stack.split('\n');
+        const fileName = errorLines[2].split('(').slice(-1)[0].split(':')[0];
+
         const document: DocumentNode = realGraphqlTag.apply(this, arguments); // eslint-disable-line flowtype-errors/uncovered
         const hasNonFragments = document.definitions.some(
             ({kind}) => kind !== 'FragmentDefinition',
         );
+
+        if (
+            fileName.includes('course-editor') ||
+            fileName.endsWith('_test.js') ||
+            fileName.endsWith('.fixture.js')
+        ) {
+            return document;
+        }
+
         if (hasNonFragments) {
             // eslint-disable-next-line flowtype-errors/uncovered
             const withTypeNames: DocumentNode = addTypenameToDocument(document);
-            collection.push({
-                raw: print(withTypeNames),
-                errors: validate(clientSchema, document),
-            });
 
             const rawSource: string = arguments[0].raw[0]; // eslint-disable-line flowtype-errors/uncovered
             const processedOptions = processPragmas(options, rawSource);
             if (processedOptions) {
-                generateTypeFiles(schema, withTypeNames, processedOptions);
+                generateTypeFiles(
+                    fileName,
+                    schema,
+                    withTypeNames,
+                    processedOptions,
+                );
             }
+            collection.push({
+                raw: print(withTypeNames),
+                errors: validate(clientSchema, document),
+                processed: !!processedOptions,
+            });
         }
         return document;
     };
@@ -172,33 +91,6 @@ const spyOnGraphqlTagToCollectQueries = (
     return wrapper;
 };
 
-const processPragmas = (
-    options: SpyOptions,
-    rawSource: string,
-): null | Options => {
-    const autogen = options.loosePragma
-        ? rawSource.includes(options.loosePragma)
-        : false;
-    const autogenStrict = options.pragma
-        ? rawSource.includes(options.pragma)
-        : false;
-    const noPragmas = !options.loosePragma && !options.pragma;
-
-    if (autogen || autogenStrict || noPragmas) {
-        return {
-            regenerateCommand: options.regenerateCommand,
-            strictNullability: noPragmas
-                ? options.strictNullability
-                : autogenStrict || !autogen,
-            readOnlyArray: options.readOnlyArray,
-            scalars: options.scalars,
-        };
-    } else {
-        return null;
-    }
-};
-
 module.exports = {
-    processPragmas,
     spyOnGraphqlTagToCollectQueries,
 };

package/src/parser/__test__/parse.test.js

@@ -0,0 +1,247 @@
+// @flow
+
+import {processFiles} from '../parse';
+import {resolveDocuments} from '../resolve';
+
+import {print} from 'graphql/language/printer';
+
+const fixtureFiles: {[key: string]: string} = {
+    '/firstFile.js': `
+        // Note that you can import graphql-tag as
+        // something other than gql.
+        import tagme from 'graphql-tag';
+
+        // Some complex syntax
+        const {x} = {x: 10}
+
+        const notExported = tagme\`
+        fragment Something on Otherthing {
+            notExportedAttr
+        }
+        \`;
+
+        export const fromFirstFile = tagme\`
+        fragment FromFirstFile on Something {
+            firstFile
+        }
+        \`;
+
+        export const alsoFirst = tagme\`
+        fragment AlsoFromFirst on Something {
+            name
+        }
+        \`;`,
+
+    '/secondFile.js': `
+        import gql from 'graphql-tag';
+        import {fromFirstFile} from './firstFile.js';
+        // This import won't be followed, because it's not exported
+        // or used in any graphql documents.
+        import hello from './someOtherFile.js';
+        // Re-exporting a fragment!
+        export {fromFirstFile}
+        export {alsoFirst} from './firstFile.js';
+
+        const secondFragment = gql\`
+        fragment SecondFragment on Thing {
+            secondAttribute
+        }
+        \`;
+        export {secondFragment};`,
+
+    '/thirdFile.js': `
+        import {fromFirstFile, alsoFirst, secondFragment} from './secondFile.js';
+        import gql from 'graphql-tag';
+        import type {someType} from './somePlace';
+
+        export const renamedSecond = secondFragment;
+
+        const otherTemplate = styled\`lets do this\`;
+
+        const myQuery = gql\`
+        query Some {
+            hello
+            ...FromFirstFile
+            ...AlsoFromFirst
+        }
+        \${fromFirstFile}
+        \${alsoFirst}
+        \`;
+
+        export const runInlineQuery = () => {
+            // Here's a fragment defined inline!
+            const anotherFragment = gql\`fragment Hello on Something { id }\`;
+
+            return gql\`
+            query InlineQuery {
+                hello
+
+                ok {
+                    ...Hello
+                    ...FromFirstFile
+                }
+                ...SecondFragment
+            }
+            \${anotherFragment}
+            \${fromFirstFile}
+            \${renamedSecond}
+            \`;
+        }`,
+
+    '/invalidThings.js': `
+        import gql from 'graphql-tag';
+        // Importing a fragment from an npm module is invalid.
+        import someExternalFragment from 'somewhere';
+
+        const myQuery = gql\`
+        query Hello {
+            id
+        }
+        \${someExternalFragment}
+        \${someUndefinedFragment}
+        // Fancy fragment expressions not supported
+        \${2 + 3}
+        \`;
+    `,
+
+    '/circular.js': `
+        import gql from 'graphql-tag';
+        export {otherThing} from './invalidReferences.js';
+        import {one} from './invalidReferences.js';
+        export const two = gql\`
+        fragment Two {
+            id
+        }
+        \${one}
+        \`;
+    `,
+
+    '/invalidReferences.js': `
+        import gql from 'graphql-tag';
+        import {otherThing, two, doesntExist} from './circular.js';
+        // 'otherThing' is imported circularly
+        export {otherThing}
+        const ok = gql\`
+        query Hello {
+            ...Ok
+        }
+        \${otherThing}
+        \${doesntExist}
+        \`;
+
+        // fragments 'one' & 'two' depend on each other
+        export const one = gql\`
+        fragment One {
+            ...Ok
+        }
+        \${two}
+        \`;
+    `,
+};
+
+const getFileSource = (name: string) => {
+    if (!fixtureFiles[name]) {
+        throw new Error(`No file ${name}`);
+    }
+    return fixtureFiles[name];
+};
+
+describe('processing fragments in various ways', () => {
+    it('should work', () => {
+        const files = processFiles(['/thirdFile.js'], getFileSource);
+        Object.keys(files).forEach((k) => {
+            expect(files[k].errors).toEqual([]);
+        });
+        const {resolved, errors} = resolveDocuments(files);
+        expect(errors).toEqual([]);
+        const printed = {};
+        Object.keys(resolved).map(
+            (k) => (printed[k] = print(resolved[k].document).trim()),
+        );
+        expect(printed).toMatchInlineSnapshot(`
+            Object {
+              "/firstFile.js:15": "fragment FromFirstFile on Something {
+              firstFile
+            }",
+              "/firstFile.js:21": "fragment AlsoFromFirst on Something {
+              name
+            }",
+              "/firstFile.js:9": "fragment Something on Otherthing {
+              notExportedAttr
+            }",
+              "/secondFile.js:11": "fragment SecondFragment on Thing {
+              secondAttribute
+            }",
+              "/thirdFile.js:10": "query Some {
+              hello
+              ...FromFirstFile
+              ...AlsoFromFirst
+            }
+
+            fragment FromFirstFile on Something {
+              firstFile
+            }
+
+            fragment AlsoFromFirst on Something {
+              name
+            }",
+              "/thirdFile.js:22": "fragment Hello on Something {
+              id
+            }",
+              "/thirdFile.js:24": "query InlineQuery {
+              hello
+              ok {
+                ...Hello
+                ...FromFirstFile
+              }
+              ...SecondFragment
+            }
+
+            fragment Hello on Something {
+              id
+            }
+
+            fragment FromFirstFile on Something {
+              firstFile
+            }
+
+            fragment SecondFragment on Thing {
+              secondAttribute
+            }",
+            }
+        `);
+    });
+
+    it('should flag things it doesnt support', () => {
+        const files = processFiles(['/invalidThings.js'], getFileSource);
+        expect(files['/invalidThings.js'].errors.map((m) => m.message))
+            .toMatchInlineSnapshot(`
+            Array [
+              "Unable to resolve someExternalFragment",
+              "Unable to resolve someUndefinedFragment",
+              "Template literal interpolation must be an identifier",
+            ]
+        `);
+    });
+
+    it('should flag resolution errors', () => {
+        const files = processFiles(['/invalidReferences.js'], getFileSource);
+        Object.keys(files).forEach((k) => {
+            expect(files[k].errors).toEqual([]);
+        });
+        const {resolved, errors} = resolveDocuments(files);
+        expect(errors.map((m) => m.message)).toMatchInlineSnapshot(`
+            Array [
+              "Circular import /circular.js -> /invalidReferences.js -> /circular.js",
+              "/circular.js has no valid gql export doesntExist",
+              "Recursive template dependency! /invalidReferences.js:15 ~ 1,2 -> /circular.js:5 ~ 1,2 -> /invalidReferences.js:15",
+              "Recursive template dependency! /circular.js:5 ~ 1,2 -> /invalidReferences.js:15 ~ 1,2 -> /circular.js:5",
+            ]
+        `);
+        const printed = {};
+        Object.keys(resolved).map(
+            (k) => (printed[k] = print(resolved[k].document).trim()),
+        );
+        expect(printed).toMatchInlineSnapshot(`Object {}`);
+    });
+});