Add support for loading graphql queries

Author: agonbina

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

@@ -86,7 +86,7 @@ module.exports = {
     // We also include JSX as a common component filename extension to support
     // some tools, although we do not recommend using it, see:
     // https://github.com/facebookincubator/create-react-app/issues/290
-    extensions: ['.ts', '.tsx', '.js', '.json', '.jsx', ''],
+    extensions: ['.gql', '.graphql', '.ts', '.tsx', '.js', '.json', '.jsx', ''],
     alias: {
       // Support React Native Web
       // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
@@ -122,6 +122,7 @@ module.exports = {
       // Otherwise, it acts like the "file" loader.
       {
         exclude: [
+          /\.(graphql|gql)$/,
           /\.html$/,
           /\.(js|jsx)$/,
           /\.(ts|tsx)$/,
@@ -135,6 +136,11 @@ module.exports = {
           name: 'static/media/[name].[hash:8].[ext]'
         }
       },
+      {
+        test: /\.(graphql|gql)$/,
+        exclude: /node_modules/,
+        loader: 'graphql-tag/loader'
+      },
       // Compile .tsx?
       {
         test: /\.(ts|tsx)$/,

packages/react-scripts/package.json

@@ -35,6 +35,7 @@
     "file-loader": "0.10.0",
     "filesize": "3.3.0",
     "fs-extra": "0.30.0",
+    "graphql-tag": "^1.2.4",
     "gzip-size": "3.0.0",
     "html-webpack-plugin": "2.24.0",
     "http-proxy-middleware": "0.17.3",