Add loader for .graphql files

README.md

@@ -172,7 +172,7 @@ Your environment will have everything you need to build a modern single-page Rea
 * Autoprefixed CSS, so you don’t need `-webkit-` or other prefixes.
 * A fast interactive unit test runner with built-in support for coverage reporting.
 * A live development server that warns about common mistakes.
-* A build script to bundle JS, CSS, and images for production, with hashes and sourcemaps.
+* A build script to bundle JS, CSS, GraphQL files and images for production, with hashes and sourcemaps.
 * An offline-first [service worker](https://developers.google.com/web/fundamentals/getting-started/primers/service-workers) and a [web app manifest](https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/), meeting all the [Progressive Web App](https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#making-a-progressive-web-app) criteria.
 * Hassle-free updates for the above tools with a single dependency.
 

packages/react-scripts/config/jest/graphqlTransform.js

@@ -0,0 +1,13 @@
+// @remove-on-eject-begin
+/**
+ * Copyright (c) 2018-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+// @remove-on-eject-end
+'use strict';
+
+const graphqlTransform = require('jest-transform-graphql');
+
+module.exports = graphqlTransform;

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

@@ -289,6 +289,13 @@ module.exports = {
               },
             ],
           },
+          // The graphql loader saves GraphQL ASTs processing time on client-side
+          // and enables queries to be separated from script over .graphql and .gql files.
+          {
+            test: /\.(graphql|gql)$/,
+            exclude: /node_modules/,
+            loader: 'graphql-tag/loader',
+          },
           // "file" loader makes sure those assets get served by WebpackDevServer.
           // When you `import` an asset, you get its (virtual) filename.
           // In production, they would get copied to the `build` folder.

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

@@ -331,6 +331,13 @@ module.exports = {
               },
             ],
           },
+          // The graphql loader saves GraphQL ASTs processing time on client-side
+          // and enables queries to be separated from script over .graphql and .gql files.
+          {
+            test: /\.(graphql|gql)$/,
+            exclude: /node_modules/,
+            loader: 'graphql-tag/loader',
+          },
           // "file" loader makes sure assets end up in the `build` folder.
           // When you `import` an asset, you get its filename.
           // This loader doesn't use a "test" so it will catch all modules

packages/react-scripts/package.json

@@ -44,9 +44,12 @@
     "extract-text-webpack-plugin": "3.0.2",
     "file-loader": "1.1.6",
     "fs-extra": "5.0.0",
+    "graphql": "^0.12.3",
+    "graphql-tag": "^2.6.1",
     "html-webpack-plugin": "2.30.1",
     "identity-obj-proxy": "3.0.0",
     "jest": "22.1.2",
+    "jest-transform-graphql": "^2.1.0",
     "object-assign": "4.1.1",
     "postcss-flexbugs-fixes": "3.2.0",
     "postcss-loader": "2.0.10",

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

@@ -35,7 +35,10 @@ module.exports = (resolve, rootDir, isEjecting) => {
         ? '<rootDir>/node_modules/babel-jest'
         : resolve('config/jest/babelTransform.js'),
       '^.+\\.css$': resolve('config/jest/cssTransform.js'),
-      '^(?!.*\\.(js|jsx|mjs|css|json)$)': resolve(
+      '^.+\\.(gql|graphql)$': isEjecting
+        ? '<rootDir>/node_modules/jest-transform-graphql'
+        : resolve('config/jest/graphqlTransform.js'),
+      '^(?!.*\\.(js|jsx|mjs|css|json|graphql|gql)$)': resolve(
         'config/jest/fileTransform.js'
       ),
     },

packages/react-scripts/template/README.md

@@ -27,6 +27,7 @@ You can find the most recent version of this guide [here](https://github.com/fac
 - [Post-Processing CSS](#post-processing-css)
 - [Adding a CSS Preprocessor (Sass, Less etc.)](#adding-a-css-preprocessor-sass-less-etc)
 - [Adding Images, Fonts, and Files](#adding-images-fonts-and-files)
+- [Adding GraphQL files](#adding-graphql-files)
 - [Using the `public` Folder](#using-the-public-folder)
   - [Changing the HTML](#changing-the-html)
   - [Adding Assets Outside of the Module System](#adding-assets-outside-of-the-module-system)
@@ -687,6 +688,30 @@ Now running `npm start` and `npm run build` also builds Sass files.
 
  `node-sass-chokidar` is used here as it addresses these issues.
 
+## Adding GraphQL files
+
+If you are using GraphQL, you can **import a your GraphQL queries directly in a JavaScript module**.
+
+By preprocessing the GraphQL queries by importing them instead of using (for example) a [template tag](https://github.com/apollographql/graphql-tag), you save GraphQL ASTs processing time on client-side and enable queries to be separated from script over `.graphql` or `.gql` files.
+
+Here is an example:
+
+```js
+// query.graphql
+{
+  githubStats(repository: "facebook/react") {
+    stars
+  }
+}
+
+import query from './query.graphql';
+
+console.log(query);
+// {
+//   "kind": "Document",
+// ...
+```
+
 ## Adding Images, Fonts, and Files
 
 With Webpack, using static assets like images and fonts works similarly to CSS.