diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js
index db371dda6e85ee7dc3a5d977a6868f1b539edfd5..aa703e079a4bc7a271c73ac2127442c2b06054a1 100644
--- a/packages/react-scripts/config/webpack.config.dev.js
+++ b/packages/react-scripts/config/webpack.config.dev.js
@@ -329,9 +329,9 @@ module.exports = {
               'sass-loader'
             ),
           },
-          // The GraphQL loader preprocesses GraphQL queries in .graphql files.
+          // The GraphQL loader preprocesses GraphQL queries in .graphql and .gql files.
           {
-            test: /\.(graphql)$/,
+            test: /\.(graphql|gql)$/,
             loader: 'graphql-tag/loader',
           },
           // "file" loader makes sure those assets get served by WebpackDevServer.
diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js
index 86869748c66e6153fe5628c28fa59c4321613f1f..2e8d4850cf1b90a45e0cef3f0a4299d72740a42c 100644
--- a/packages/react-scripts/config/webpack.config.prod.js
+++ b/packages/react-scripts/config/webpack.config.prod.js
@@ -363,9 +363,9 @@ module.exports = {
               'sass-loader'
             ),
           },
-          // The GraphQL loader preprocesses GraphQL queries in .graphql files.
+          // The GraphQL loader preprocesses GraphQL queries in .graphql and .gql files.
           {
-            test: /\.(graphql)$/,
+            test: /\.(graphql|gql)$/,
             loader: 'graphql-tag/loader',
           },
           // "file" loader makes sure assets end up in the `build` folder.