Add loader for .graphql files (facebook#3909)

* Add graphql loader to webpack config

Signed-off-by: petetnt <[email protected]>

* Update README.md

Signed-off-by: petetnt <[email protected]>

* Update react-scripts README.md

Signed-off-by: petetnt <[email protected]>

* Add graphql jest transform

Signed-off-by: petetnt <[email protected]>

* Add integration tests, pin versions in package.json

Signed-off-by: petetnt <[email protected]>

* Tests expect regexp matchers

Signed-off-by: petetnt <[email protected]>

* Use strict equal test instead

Signed-off-by: petetnt <[email protected]>

* Escaping is hard

Signed-off-by: petetnt <[email protected]>

* Add comment for signifying a different file

* Update docs

* Fix jest config

* Remove node_modules exclusion

* Update README.md

* Inline graphql jest transform

Signed-off-by: petetnt <[email protected]>

* Update copyright header

Signed-off-by: petetnt <[email protected]>

* Use .graphql extension only

Signed-off-by: petetnt <[email protected]>

Author: petetnt

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);
+  },
+};

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

@@ -278,6 +278,11 @@ module.exports = {
               },
             ],
           },
+          // The GraphQL loader preprocesses GraphQL queries in .graphql files.
+          {
+            test: /\.(graphql)$/,
+            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

@@ -320,6 +320,11 @@ module.exports = {
             ),
             // Note: this won't work without `new ExtractTextPlugin()` in `plugins`.
           },
+          // The GraphQL loader preprocesses GraphQL queries in .graphql files.
+          {
+            test: /\.(graphql)$/,
+            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/fixtures/kitchensink/integration/webpack.test.js

@@ -31,6 +31,16 @@ describe('Integration', () => {
       );
     });
 
+    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');
 

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

@@ -111,6 +111,11 @@ class App extends Component {
           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)

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>
+);

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);
+  });
+});

packages/react-scripts/fixtures/kitchensink/src/features/webpack/assets/graphql.graphql

@@ -0,0 +1,5 @@
+{
+  test(test: "test") {
+    test
+  }
+}

packages/react-scripts/package.json

@@ -47,6 +47,8 @@
     "find-pkg": "1.0.0",
     "fs-extra": "5.0.0",
     "globby": "7.1.1",
+    "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",

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

@@ -38,7 +38,8 @@ module.exports = (resolve, rootDir, srcRoots) => {
     transform: {
       '^.+\\.(js|jsx|mjs)$': resolve('config/jest/babelTransform.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'
       ),
     },