From d68ffec848dc65566cb3cae00ac1e9ad5a7cf803 Mon Sep 17 00:00:00 2001
From: Patrick Arminio <patrick.arminio@gmail.com>
Date: Sat, 3 Mar 2018 22:16:05 +0000
Subject: [PATCH 1/3] Add loader for .graqhql files

See: https://github.com/facebook/create-react-app/pull/3909
---
 .../config/jest/graphqlTransform.js           |  18 ++++
 .../config/webpack.config.dev.js              |   5 +
 .../kitchensink/integration/webpack.test.js   |  10 ++
 .../fixtures/kitchensink/src/App.js           | 101 +++++++++++-------
 .../src/features/webpack/GraphQLInclusion.js  |  15 +++
 .../features/webpack/GraphQLInclusion.test.js |  17 +++
 .../features/webpack/assets/graphql.graphql   |   5 +
 packages/react-scripts/package.json           |   2 +
 .../scripts/utils/createJestConfig.js         |   3 +-
 packages/react-scripts/template/README.md     |  33 +++++-
 10 files changed, 167 insertions(+), 42 deletions(-)
 create mode 100644 packages/react-scripts/config/jest/graphqlTransform.js
 create mode 100644 packages/react-scripts/fixtures/kitchensink/src/features/webpack/GraphQLInclusion.js
 create mode 100644 packages/react-scripts/fixtures/kitchensink/src/features/webpack/GraphQLInclusion.test.js
 create mode 100644 packages/react-scripts/fixtures/kitchensink/src/features/webpack/assets/graphql.graphql

diff --git a/packages/react-scripts/config/jest/graphqlTransform.js b/packages/react-scripts/config/jest/graphqlTransform.js
new file mode 100644
index 000000000..95d4c5fd7
--- /dev/null
+++ b/packages/react-scripts/config/jest/graphqlTransform.js
@@ -0,0 +1,18 @@
+// @remove-on-eject-begin
+/**
+ * Copyright (c) 2018-present, Facebook, Inc.
+ * Copyright (c) 2016 Remind
+ *
+ * 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 loader = require('graphql-tag/loader');
+
+module.exports = {
+  process(src) {
+    return loader.call({ cacheable() {} }, src);
+  },
+};
\ No newline at end of file
diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js
index 924e3e4f0..346c660e8 100644
--- a/packages/react-scripts/config/webpack.config.dev.js
+++ b/packages/react-scripts/config/webpack.config.dev.js
@@ -183,6 +183,11 @@ module.exports = {
               },
             ],
           },
+          // The GraphQL loader preprocesses GraphQL queries in .graphql files.
+          {
+            test: /\.(graphql)$/,
+            loader: 'graphql-tag/loader',
+          },
           // "postcss" loader applies autoprefixer to our CSS.
           // "css" loader resolves paths in CSS and adds assets as dependencies.
           // "style" loader turns CSS into JS modules that inject <style> tags.
diff --git a/packages/react-scripts/fixtures/kitchensink/integration/webpack.test.js b/packages/react-scripts/fixtures/kitchensink/integration/webpack.test.js
index 1fe5c9f64..c51aa12f1 100644
--- a/packages/react-scripts/fixtures/kitchensink/integration/webpack.test.js
+++ b/packages/react-scripts/fixtures/kitchensink/integration/webpack.test.js
@@ -21,6 +21,16 @@ describe('Integration', () => {
       ).to.match(/#feature-css-inclusion\{background:.+;color:.+}/);
     });
 
+    it('graphql files inclusion', async () => {
+      const doc = await initDOM('graphql-inclusion');
+      const children = doc.getElementById('graphql-inclusion').children;
+
+      // .graphql
+      expect(children[0].textContent.replace(/\s/g, '')).to.equal(
+        '{"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","variableDefinitions":[],"directives":[],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"test"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"test"},"value":{"kind":"StringValue","value":"test","block":false}}],"directives":[],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"test"},"arguments":[],"directives":[]}]}}]}}],"loc":{"start":0,"end":40,"source":{"body":"{\\ntest(test:\\"test\\"){\\ntest\\n}\\n}\\n","name":"GraphQLrequest","locationOffset":{"line":1,"column":1}}}}'
+      );
+    });
+
     it('image inclusion', async () => {
       const doc = await initDOM('image-inclusion');
 
diff --git a/packages/react-scripts/fixtures/kitchensink/src/App.js b/packages/react-scripts/fixtures/kitchensink/src/App.js
index ecec924ff..983255703 100644
--- a/packages/react-scripts/fixtures/kitchensink/src/App.js
+++ b/packages/react-scripts/fixtures/kitchensink/src/App.js
@@ -52,114 +52,137 @@ class App extends Component {
     const feature = window.location.hash.slice(1);
     switch (feature) {
       case 'array-destructuring':
-        import(
-          './features/syntax/ArrayDestructuring'
-        ).then(f => this.setFeature(f.default));
+        import('./features/syntax/ArrayDestructuring').then(f =>
+          this.setFeature(f.default)
+        );
         break;
       case 'array-spread':
         import('./features/syntax/ArraySpread').then(f =>
-          this.setFeature(f.default));
+          this.setFeature(f.default)
+        );
         break;
       case 'async-await':
         import('./features/syntax/AsyncAwait').then(f =>
-          this.setFeature(f.default));
+          this.setFeature(f.default)
+        );
         break;
       case 'class-properties':
         import('./features/syntax/ClassProperties').then(f =>
-          this.setFeature(f.default));
+          this.setFeature(f.default)
+        );
         break;
       case 'computed-properties':
-        import(
-          './features/syntax/ComputedProperties'
-        ).then(f => this.setFeature(f.default));
+        import('./features/syntax/ComputedProperties').then(f =>
+          this.setFeature(f.default)
+        );
         break;
       case 'css-inclusion':
         import('./features/webpack/CssInclusion').then(f =>
-          this.setFeature(f.default));
+          this.setFeature(f.default)
+        );
         break;
       case 'custom-interpolation':
-        import(
-          './features/syntax/CustomInterpolation'
-        ).then(f => this.setFeature(f.default));
+        import('./features/syntax/CustomInterpolation').then(f =>
+          this.setFeature(f.default)
+        );
         break;
       case 'default-parameters':
         import('./features/syntax/DefaultParameters').then(f =>
-          this.setFeature(f.default));
+          this.setFeature(f.default)
+        );
         break;
       case 'destructuring-and-await':
-        import(
-          './features/syntax/DestructuringAndAwait'
-        ).then(f => this.setFeature(f.default));
+        import('./features/syntax/DestructuringAndAwait').then(f =>
+          this.setFeature(f.default)
+        );
         break;
       case 'file-env-variables':
         import('./features/env/FileEnvVariables').then(f =>
-          this.setFeature(f.default));
+          this.setFeature(f.default)
+        );
         break;
       case 'generators':
         import('./features/syntax/Generators').then(f =>
-          this.setFeature(f.default));
+          this.setFeature(f.default)
+        );
+        break;
+      case 'graphql-inclusion':
+        import('./features/webpack/GraphQLInclusion').then(f =>
+          this.setFeature(f.default)
+        );
         break;
       case 'image-inclusion':
         import('./features/webpack/ImageInclusion').then(f =>
-          this.setFeature(f.default));
+          this.setFeature(f.default)
+        );
         break;
       case 'json-inclusion':
         import('./features/webpack/JsonInclusion').then(f =>
-          this.setFeature(f.default));
+          this.setFeature(f.default)
+        );
         break;
       case 'linked-modules':
         import('./features/webpack/LinkedModules').then(f =>
-          this.setFeature(f.default));
+          this.setFeature(f.default)
+        );
         break;
       case 'node-path':
         import('./features/env/NodePath').then(f => this.setFeature(f.default));
         break;
       case 'no-ext-inclusion':
         import('./features/webpack/NoExtInclusion').then(f =>
-          this.setFeature(f.default));
+          this.setFeature(f.default)
+        );
         break;
       case 'object-destructuring':
-        import(
-          './features/syntax/ObjectDestructuring'
-        ).then(f => this.setFeature(f.default));
+        import('./features/syntax/ObjectDestructuring').then(f =>
+          this.setFeature(f.default)
+        );
         break;
       case 'object-spread':
         import('./features/syntax/ObjectSpread').then(f =>
-          this.setFeature(f.default));
+          this.setFeature(f.default)
+        );
         break;
       case 'promises':
         import('./features/syntax/Promises').then(f =>
-          this.setFeature(f.default));
+          this.setFeature(f.default)
+        );
         break;
       case 'public-url':
         import('./features/env/PublicUrl').then(f =>
-          this.setFeature(f.default));
+          this.setFeature(f.default)
+        );
         break;
       case 'rest-and-default':
         import('./features/syntax/RestAndDefault').then(f =>
-          this.setFeature(f.default));
+          this.setFeature(f.default)
+        );
         break;
       case 'rest-parameters':
         import('./features/syntax/RestParameters').then(f =>
-          this.setFeature(f.default));
+          this.setFeature(f.default)
+        );
         break;
       case 'shell-env-variables':
         import('./features/env/ShellEnvVariables').then(f =>
-          this.setFeature(f.default));
+          this.setFeature(f.default)
+        );
         break;
       case 'svg-inclusion':
         import('./features/webpack/SvgInclusion').then(f =>
-          this.setFeature(f.default));
+          this.setFeature(f.default)
+        );
         break;
       case 'template-interpolation':
-        import(
-          './features/syntax/TemplateInterpolation'
-        ).then(f => this.setFeature(f.default));
+        import('./features/syntax/TemplateInterpolation').then(f =>
+          this.setFeature(f.default)
+        );
         break;
       case 'unknown-ext-inclusion':
-        import(
-          './features/webpack/UnknownExtInclusion'
-        ).then(f => this.setFeature(f.default));
+        import('./features/webpack/UnknownExtInclusion').then(f =>
+          this.setFeature(f.default)
+        );
         break;
       case 'expand-env-variables':
         import('./features/env/ExpandEnvVariables').then(f =>
diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/webpack/GraphQLInclusion.js b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/GraphQLInclusion.js
new file mode 100644
index 000000000..09c7fcf38
--- /dev/null
+++ b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/GraphQLInclusion.js
@@ -0,0 +1,15 @@
+/**
+ * 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.
+ */
+
+import React from 'react';
+import A from './assets/graphql.graphql';
+
+export default () => (
+  <p id="graphql-inclusion">
+    <span>{JSON.stringify(A)}</span>
+  </p>
+);
\ No newline at end of file
diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/webpack/GraphQLInclusion.test.js b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/GraphQLInclusion.test.js
new file mode 100644
index 000000000..914ce241b
--- /dev/null
+++ b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/GraphQLInclusion.test.js
@@ -0,0 +1,17 @@
+/**
+ * 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.
+ */
+
+import React from 'react';
+import ReactDOM from 'react-dom';
+import GraphQLInclusion from './GraphQLInclusion';
+
+describe('graphql files inclusion', () => {
+  it('renders without crashing', () => {
+    const div = document.createElement('div');
+    ReactDOM.render(<GraphQLInclusion />, div);
+  });
+});
diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/webpack/assets/graphql.graphql b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/assets/graphql.graphql
new file mode 100644
index 000000000..70bf76fba
--- /dev/null
+++ b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/assets/graphql.graphql
@@ -0,0 +1,5 @@
+{
+  test(test: "test") {
+    test
+  }
+}
\ No newline at end of file
diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json
index 95bf68c2a..169eea5eb 100644
--- a/packages/react-scripts/package.json
+++ b/packages/react-scripts/package.json
@@ -34,6 +34,8 @@
     "file-loader": "0.11.2",
     "fork-ts-checker-webpack-plugin": "^0.2.8",
     "fs-extra": "3.0.1",
+    "graphql": "0.12.3",
+    "graphql-tag": "2.6.1",
     "html-webpack-plugin": "2.29.0",
     "jest": "22.4.2",
     "object-assign": "4.1.1",
diff --git a/packages/react-scripts/scripts/utils/createJestConfig.js b/packages/react-scripts/scripts/utils/createJestConfig.js
index 515e56364..e86eb340d 100644
--- a/packages/react-scripts/scripts/utils/createJestConfig.js
+++ b/packages/react-scripts/scripts/utils/createJestConfig.js
@@ -36,7 +36,8 @@ module.exports = (resolve, rootDir, isEjecting) => {
         : resolve('config/jest/babelTransform.js'),
       '^.+\\.tsx?$': resolve('config/jest/typescriptTransform.js'),
       '^.+\\.css$': resolve('config/jest/cssTransform.js'),
-      '^(?!.*\\.(js|jsx|mjs|css|json)$)': resolve(
+      '^.+\\.(graphql)$': resolve('config/jest/graphqlTransform.js'),
+      '^(?!.*\\.(js|jsx|mjs|css|json|graphql)$)': resolve(
         'config/jest/fileTransform.js'
       ),
     },
diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md
index c773d2435..5b001a262 100644
--- a/packages/react-scripts/template/README.md
+++ b/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)
@@ -299,7 +300,7 @@ In the WebStorm menu `Run` select `Edit Configurations...`. Then click `+` and s
 
 Start your app by running `npm start`, then press `^D` on macOS or `F9` on Windows and Linux or click the green debug icon to start debugging in WebStorm.
 
-The same way you can debug your application in IntelliJ IDEA Ultimate, PhpStorm, PyCharm Pro, and RubyMine. 
+The same way you can debug your application in IntelliJ IDEA Ultimate, PhpStorm, PyCharm Pro, and RubyMine.
 
 ## Formatting Code Automatically
 
@@ -695,6 +696,34 @@ Please be advised that this is also a custom feature of Webpack.
 **It is not required for React** but many people enjoy it (and React Native uses a similar mechanism for images).<br>
 An alternative way of handling static assets is described in the next section.
 
+## Adding GraphQL files
+
+> Note: this feature is available with react-scripts@2.0.0 and higher.
+
+If you are using GraphQL, you can **`import` GraphQL files in a JavaScript module**.
+
+By importing GraphQL queries instead of using a [template tag](https://github.com/apollographql/graphql-tag), they are preprocessed at build time. This eliminates the need to process them on the client at run time. It also allows you to separate your GraphQL queries from your code. You can put a GraphQL query in a file with a `.graphql` extension.
+
+Here is an example:
+
+```js
+// query.graphql
+{
+  githubStats(repository: "facebook/react") {
+    stars
+  }
+}
+
+// foo.js
+
+import query from './query.graphql';
+
+console.log(query);
+// {
+//   "kind": "Document",
+// ...
+```
+
 ## Using the `public` Folder
 
 >Note: this feature is available with `react-scripts@0.5.0` and higher.
@@ -2002,7 +2031,7 @@ If you’re using [Apache HTTP Server](https://httpd.apache.org/), you need to c
     RewriteRule ^ index.html [QSA,L]
 ```
 
-It will get copied to the `build` folder when you run `npm run build`. 
+It will get copied to the `build` folder when you run `npm run build`.
 
 If you’re using [Apache Tomcat](http://tomcat.apache.org/), you need to follow [this Stack Overflow answer](https://stackoverflow.com/a/41249464/4878474).
 

From 7e3357d23f3ba717c58f5e225505cec4e89c6ffc Mon Sep 17 00:00:00 2001
From: Patrick Arminio <patrick.arminio@gmail.com>
Date: Mon, 14 May 2018 10:32:55 -0700
Subject: [PATCH 2/3] Remove note on react scripts 2.0.0

---
 packages/react-scripts/template/README.md | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md
index 5b001a262..d41de6924 100644
--- a/packages/react-scripts/template/README.md
+++ b/packages/react-scripts/template/README.md
@@ -698,8 +698,6 @@ An alternative way of handling static assets is described in the next section.
 
 ## Adding GraphQL files
 
-> Note: this feature is available with react-scripts@2.0.0 and higher.
-
 If you are using GraphQL, you can **`import` GraphQL files in a JavaScript module**.
 
 By importing GraphQL queries instead of using a [template tag](https://github.com/apollographql/graphql-tag), they are preprocessed at build time. This eliminates the need to process them on the client at run time. It also allows you to separate your GraphQL queries from your code. You can put a GraphQL query in a file with a `.graphql` extension.

From d3716d546f9b10024aad62cd64ae62eb02fc2d9e Mon Sep 17 00:00:00 2001
From: Patrick Arminio <patrick.arminio@gmail.com>
Date: Mon, 14 May 2018 10:34:00 -0700
Subject: [PATCH 3/3] Add missing graphql loader in production config

---
 packages/react-scripts/config/webpack.config.prod.js | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js
index c267bf011..93969bedb 100644
--- a/packages/react-scripts/config/webpack.config.prod.js
+++ b/packages/react-scripts/config/webpack.config.prod.js
@@ -188,6 +188,11 @@ module.exports = {
               },
             ],
           },
+          // The GraphQL loader preprocesses GraphQL queries in .graphql files.
+          {
+            test: /\.(graphql)$/,
+            loader: 'graphql-tag/loader',
+          },
           // The notation here is somewhat confusing.
           // "postcss" loader applies autoprefixer to our CSS.
           // "css" loader resolves paths in CSS and adds assets as dependencies.