add gql file extension

packages/babel-plugin-named-asset-import/index.js

@@ -7,7 +7,12 @@ function namedAssetImportPlugin({ types: t }) {
 
   return {
     visitor: {
-      ImportDeclaration(path, { opts: { loaderMap } }) {
+      ImportDeclaration(
+        path,
+        {
+          opts: { loaderMap },
+        }
+      ) {
         const sourcePath = path.node.source.value;
         const ext = extname(sourcePath).substr(1);
 

packages/react-dev-utils/FileSizeReporter.js

@@ -43,7 +43,7 @@ function printFileSizesAfterBuild(
             name: path.basename(asset.name),
             size: size,
             sizeLabel:
-              filesize(size) + (difference ? ' (' + difference + ')' : '')
+              filesize(size) + (difference ? ' (' + difference + ')' : ''),
           };
         })
     )

packages/react-dev-utils/ModuleScopePlugin.js

@@ -84,7 +84,8 @@ class ModuleScopePlugin {
         } else {
           callback();
         }
-    });
+      }
+    );
   }
 }
 

packages/react-dev-utils/clearConsole.js

@@ -8,7 +8,9 @@
 'use strict';
 
 function clearConsole() {
-  process.stdout.write(process.platform === 'win32' ? '\x1B[2J\x1B[0f' : '\x1B[2J\x1B[3J\x1B[H');
+  process.stdout.write(
+    process.platform === 'win32' ? '\x1B[2J\x1B[0f' : '\x1B[2J\x1B[3J\x1B[H'
+  );
 }
 
 module.exports = clearConsole;

packages/react-dev-utils/getProcessForPort.js

@@ -58,7 +58,9 @@ function getProcessCommand(processId, processDirectory) {
 
 function getDirectoryOfProcessById(processId) {
   return execSync(
-    'lsof -p ' + processId + ' | awk \'$4=="cwd" {for (i=9; i<=NF; i++) printf "%s ", $i}\'',
+    'lsof -p ' +
+      processId +
+      ' | awk \'$4=="cwd" {for (i=9; i<=NF; i++) printf "%s ", $i}\'',
     execOptions
   ).trim();
 }

packages/react-scripts/config/webpack.config.dev.js

@@ -225,7 +225,7 @@ module.exports = {
               {
                 loader: require.resolve('thread-loader'),
                 options: {
-                  poolTimeout: Infinity // keep workers alive for more effective watch mode
+                  poolTimeout: Infinity, // keep workers alive for more effective watch mode
                 },
               },
               {
@@ -266,7 +266,7 @@ module.exports = {
               {
                 loader: require.resolve('thread-loader'),
                 options: {
-                  poolTimeout: Infinity // keep workers alive for more effective watch mode
+                  poolTimeout: Infinity, // keep workers alive for more effective watch mode
                 },
               },
               {
@@ -331,7 +331,7 @@ module.exports = {
           },
           // The GraphQL loader preprocesses GraphQL queries in .graphql files.
           {
-            test: /\.(graphql)$/,
+            test: /\.(graphql|gql)$/,
             loader: 'graphql-tag/loader',
           },
           // "file" loader makes sure those assets get served by WebpackDevServer.

packages/react-scripts/config/webpack.config.prod.js

@@ -365,7 +365,7 @@ module.exports = {
           },
           // The GraphQL loader preprocesses GraphQL queries in .graphql files.
           {
-            test: /\.(graphql)$/,
+            test: /\.(graphql|gql)$/,
             loader: 'graphql-tag/loader',
           },
           // "file" loader makes sure assets end up in the `build` folder.

packages/react-scripts/fixtures/kitchensink/integration/webpack.test.js

@@ -11,40 +11,43 @@ import url from 'url';
 
 const matchCSS = (doc, regexes) => {
   if (process.env.E2E_FILE) {
-      const elements = doc.getElementsByTagName('link');
-      let href = "";
-      for (const elem of elements) {
-        if (elem.rel === 'stylesheet') {
-          href = elem.href;
-        }
+    const elements = doc.getElementsByTagName('link');
+    let href = '';
+    for (const elem of elements) {
+      if (elem.rel === 'stylesheet') {
+        href = elem.href;
       }
-      resourceLoader(
-        { url: url.parse(href) },
-        (_, textContent) => {
-          for (const regex of regexes) {
-          expect(textContent).to.match(regex);
-          }
-        }
-      );
-
+    }
+    resourceLoader({ url: url.parse(href) }, (_, textContent) => {
+      for (const regex of regexes) {
+        expect(textContent).to.match(regex);
+      }
+    });
   } else {
     for (let i = 0; i < regexes.length; ++i) {
-      expect(doc.getElementsByTagName('style')[i].textContent.replace(/\s/g, '')).to.match(regexes[i]);
+      expect(
+        doc.getElementsByTagName('style')[i].textContent.replace(/\s/g, '')
+      ).to.match(regexes[i]);
     }
   }
-}
+};
 
 describe('Integration', () => {
   describe('Webpack plugins', () => {
     it('css inclusion', async () => {
       const doc = await initDOM('css-inclusion');
-      matchCSS(doc, [/html\{/, /#feature-css-inclusion\{background:.+;color:.+}/]);
+      matchCSS(doc, [
+        /html\{/,
+        /#feature-css-inclusion\{background:.+;color:.+}/,
+      ]);
     });
 
     it('css modules inclusion', async () => {
       const doc = await initDOM('css-modules-inclusion');
-      matchCSS(doc, [/.+style_cssModulesInclusion__.+\{background:.+;color:.+}/,
-            /.+assets_cssModulesIndexInclusion__.+\{background:.+;color:.+}/]);
+      matchCSS(doc, [
+        /.+style_cssModulesInclusion__.+\{background:.+;color:.+}/,
+        /.+assets_cssModulesIndexInclusion__.+\{background:.+;color:.+}/,
+      ]);
     });
 
     it('scss inclusion', async () => {
@@ -54,9 +57,10 @@ describe('Integration', () => {
 
     it('scss modules inclusion', async () => {
       const doc = await initDOM('scss-modules-inclusion');
-      matchCSS(doc, [/.+scss-styles_scssModulesInclusion.+\{background:.+;color:.+}/,
-        /.+assets_scssModulesIndexInclusion.+\{background:.+;color:.+}/]);
-
+      matchCSS(doc, [
+        /.+scss-styles_scssModulesInclusion.+\{background:.+;color:.+}/,
+        /.+assets_scssModulesIndexInclusion.+\{background:.+;color:.+}/,
+      ]);
     });
 
     it('sass inclusion', async () => {
@@ -66,8 +70,10 @@ describe('Integration', () => {
 
     it('sass modules inclusion', async () => {
       const doc = await initDOM('sass-modules-inclusion');
-      matchCSS(doc, [/.+sass-styles_sassModulesInclusion.+\{background:.+;color:.+}/,
-            /.+assets_sassModulesIndexInclusion.+\{background:.+;color:.+}/]);
+      matchCSS(doc, [
+        /.+sass-styles_sassModulesInclusion.+\{background:.+;color:.+}/,
+        /.+assets_sassModulesIndexInclusion.+\{background:.+;color:.+}/,
+      ]);
     });
 
     it('graphql files inclusion', async () => {

packages/react-scripts/fixtures/kitchensink/src/App.js

@@ -28,7 +28,10 @@ class BuiltEmitter extends Component {
   }
 
   render() {
-    const { props: { feature }, handleReady } = this;
+    const {
+      props: { feature },
+      handleReady,
+    } = this;
     return (
       <div>
         {createElement(feature, {

packages/react-scripts/fixtures/kitchensink/src/features/webpack/GraphQLInclusion.js

@@ -7,9 +7,16 @@
 
 import React from 'react';
 import A from './assets/graphql.graphql';
+import B from './assets/graphql.gql';
 
-export default () => (
+export const GraphLQLExtension = () => (
   <p id="graphql-inclusion">
     <span>{JSON.stringify(A)}</span>
   </p>
 );
+
+export const GQLExtension = () => (
+  <p id="graphql-inclusion">
+    <span>{JSON.stringify(B)}</span>
+  </p>
+);

packages/react-scripts/fixtures/kitchensink/src/features/webpack/GraphQLInclusion.test.js

@@ -7,11 +7,15 @@
 
 import React from 'react';
 import ReactDOM from 'react-dom';
-import GraphQLInclusion from './GraphQLInclusion';
+import { GraphLExtension, GQLExtension } from './GraphQLInclusion';
 
 describe('graphql files inclusion', () => {
-  it('renders without crashing', () => {
+  it('renders without crashing with GraphLExtension', () => {
     const div = document.createElement('div');
     ReactDOM.render(<GraphQLInclusion />, div);
   });
+  it('renders without crashing with GQLExtension', () => {
+    const div = document.createElement('div');
+    ReactDOM.render(<GQLExtension />, div);
+  });
 });

packages/react-scripts/scripts/utils/createJestConfig.js

@@ -38,8 +38,8 @@ module.exports = (resolve, rootDir, srcRoots) => {
     transform: {
       '^.+\\.(js|jsx|mjs)$': resolve('config/jest/babelTransform.js'),
       '^.+\\.css$': resolve('config/jest/cssTransform.js'),
-      '^.+\\.(graphql)$': resolve('config/jest/graphqlTransform.js'),
-      '^(?!.*\\.(js|jsx|mjs|css|json|graphql)$)': resolve(
+      '^.+\\.(gql|graphql)$': resolve('config/jest/graphqlTransform.js'),
+      '^(?!.*\\.(js|jsx|mjs|css|json|graphql|gql)$)': resolve(
         'config/jest/fileTransform.js'
       ),
     },