Repository: mirumee/ariadne (language: python)

Issue:
GraphiQL is using react development
It should use react development/react production depending on the DEBUG argument

https://github.com/mirumee/ariadne/blob/master/ariadne/explorer/templates/graphiql.html#L51


Discussion / hints:
Nice catch. I've copied over the example HTML template from their repo and I've didn't check what deps its actually pulling.

Fix patch:
diff --git a/CHANGELOG.md b/CHANGELOG.md
index c66f3c265..34f93a3e2 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,6 +9,7 @@
 - Removed `OpenTracingSync` and `opentracing_extension_sync`. `OpenTracing` and `opentracing_extension` now support both async and sync contexts.
 - Removed `ApolloTracingSync`. `ApolloTracing` now supports both async and sync contexts.
 - Added `OpenTelemetry` and `opentelemetry_extension` extension, importable form `ariadne.tracing.opentelemetry`.
+- Updated default GraphiQL2 template to use production build of React.js.
 
 
 ## 0.19.1 (2023-03-28)
diff --git a/ariadne/explorer/templates/graphiql.html b/ariadne/explorer/templates/graphiql.html
index a492b40ad..b7775abdf 100644
--- a/ariadne/explorer/templates/graphiql.html
+++ b/ariadne/explorer/templates/graphiql.html
@@ -48,11 +48,11 @@
 
     <script
       crossorigin
-      src="https://unpkg.com/react@17/umd/react.development.js"
+      src="https://unpkg.com/react@17/umd/react.production.min.js"
     ></script>
     <script
       crossorigin
-      src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
+      src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"
     ></script>
 
     <script


Test patch:
diff --git a/tests/asgi/snapshots/snap_test_explorer.py b/tests/asgi/snapshots/snap_test_explorer.py
index 08f5728bf..a38e0ae58 100644
--- a/tests/asgi/snapshots/snap_test_explorer.py
+++ b/tests/asgi/snapshots/snap_test_explorer.py
@@ -91,11 +91,11 @@
 
     <script
       crossorigin
-      src="https://unpkg.com/react@17/umd/react.development.js"
+      src="https://unpkg.com/react@17/umd/react.production.min.js"
     ></script>
     <script
       crossorigin
-      src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
+      src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"
     ></script>
 
     <script
@@ -181,11 +181,11 @@
 
     <script
       crossorigin
-      src="https://unpkg.com/react@17/umd/react.development.js"
+      src="https://unpkg.com/react@17/umd/react.production.min.js"
     ></script>
     <script
       crossorigin
-      src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
+      src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"
     ></script>
 
     <script
diff --git a/tests/explorers/snapshots/snap_test_explorers.py b/tests/explorers/snapshots/snap_test_explorers.py
index b6dc9478c..d82ca4f5e 100644
--- a/tests/explorers/snapshots/snap_test_explorers.py
+++ b/tests/explorers/snapshots/snap_test_explorers.py
@@ -91,11 +91,11 @@
 
     <script
       crossorigin
-      src="https://unpkg.com/react@17/umd/react.development.js"
+      src="https://unpkg.com/react@17/umd/react.production.min.js"
     ></script>
     <script
       crossorigin
-      src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
+      src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"
     ></script>
 
     <script
@@ -193,11 +193,11 @@
 
     <script
       crossorigin
-      src="https://unpkg.com/react@17/umd/react.development.js"
+      src="https://unpkg.com/react@17/umd/react.production.min.js"
     ></script>
     <script
       crossorigin
-      src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
+      src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"
     ></script>
 
     <script
diff --git a/tests/tracing/snapshots/snap_test_apollotracing.py b/tests/tracing/snapshots/snap_test_apollotracing.py
index 64494b7f1..5b2db1369 100644
--- a/tests/tracing/snapshots/snap_test_apollotracing.py
+++ b/tests/tracing/snapshots/snap_test_apollotracing.py
@@ -35,34 +35,6 @@
     }
 }
 
-snapshots['test_apollotracing_extension_adds_tracing_data_to_result_extensions 1'] = {
-    'data': {
-        'status': True
-    },
-    'extensions': {
-        'tracing': {
-            'duration': 0,
-            'endTime': '2012-01-14T03:21:34.000000Z',
-            'execution': {
-                'resolvers': [
-                    {
-                        'duration': 0,
-                        'fieldName': 'status',
-                        'parentType': 'Query',
-                        'path': [
-                            'status'
-                        ],
-                        'returnType': 'Boolean',
-                        'startOffset': 0
-                    }
-                ]
-            },
-            'startTime': '2012-01-14T03:21:34.000000Z',
-            'version': 1
-        }
-    }
-}
-
 snapshots['test_apollotracing_extension_adds_tracing_data_to_sync_result_extensions 1'] = {
     'data': {
         'status': True
@@ -91,10 +63,6 @@
     }
 }
 
-snapshots['test_apollotracing_extension_handles_exceptions_in_resolvers 1'] = {
-    'testError': None
-}
-
 snapshots['test_apollotracing_extension_handles_exceptions_in_resolvers_in_async_context 1'] = {
     'testError': None
 }
diff --git a/tests/wsgi/snapshots/snap_test_explorer.py b/tests/wsgi/snapshots/snap_test_explorer.py
index 4bff11fb8..972c4e0ac 100644
--- a/tests/wsgi/snapshots/snap_test_explorer.py
+++ b/tests/wsgi/snapshots/snap_test_explorer.py
@@ -15,11 +15,11 @@
 ]
 
 snapshots['test_default_explorer_html_is_served_on_get_request 1'] = [
-    b'<!--\n *  Copyright (c) 2021 GraphQL Contributors\n *  All rights reserved.\n *\n *  This source code is licensed under the license found in the\n *  LICENSE file in the root directory of this source tree.\n-->\n<!DOCTYPE html>\n<html>\n  <head>\n    <meta charset="utf-8" />\n    <meta name="viewport" content="user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui">\n    <title>Ariadne GraphQL</title>\n    <style>\n      body {\n        height: 100%;\n        margin: 0;\n        width: 100%;\n        overflow: hidden;\n      }\n\n      #graphiql {\n        height: 100vh;\n      }\n\n      #graphiql-loading {\n        height: 100%;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n\n        color: #545454;\n        font-size: 1.5em;\n        font-family: sans-serif;\n        font-weight: bold;\n      }\n    </style>\n    <link rel="stylesheet" href="https://unpkg.com/graphiql/graphiql.min.css" />\n    \n  </head>\n\n  <body>\n    <div id="graphiql">\n      <div id="graphiql-loading">Loading Ariadne GraphQL...</div>\n    </div>\n\n    <script\n      crossorigin\n      src="https://unpkg.com/react@17/umd/react.development.js"\n    ></script>\n    <script\n      crossorigin\n      src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"\n    ></script>\n\n    <script\n      crossorigin\n      src="https://unpkg.com/graphiql/graphiql.min.js"\n    ></script>\n\n    \n\n    <script>\n      var fetcher = GraphiQL.createFetcher({\n        url: window.location.href,\n      });\n\n      function AriadneGraphiQL() {\n        var [query, setQuery] = React.useState(\n          \'#\\n# GraphiQL is an in -browser tool for writing, validating, and\\n# testing GraphQL queries.\\n#\\n# Type queries into this side of the screen, and you will see intelligent\\n# typeaheads aware of the current GraphQL type schema and live syntax and\\n# validation errors highlighted within the text.\\n#\\n# GraphQL queries typically start with a "{" character. Lines that start\\n# with a # are ignored.\\n#\\n# An example GraphQL query might look like:\\n#\\n#     {\\n#       field(arg: "value") {\\n#         subField\\n#\\n#       }\\n#\\n#     }\\n#\\n# Keyboard shortcuts:\\n#\\n#   Prettify query: Shift - Ctrl - P(or press the prettify button)\\n#\\n#  Merge fragments: Shift - Ctrl - M(or press the merge button)\\n#\\n#        Run Query: Ctrl - Enter(or press the play button)\\n#\\n#    Auto Complete: Ctrl - Space(or just start typing)\\n#\',\n        );\n        \n        return React.createElement(GraphiQL, {\n          fetcher: fetcher,\n          defaultEditorToolsVisibility: true,\n          \n          query: query,\n          onEditQuery: setQuery,\n        });\n      }\n\n      ReactDOM.render(\n        React.createElement(AriadneGraphiQL),\n        document.getElementById(\'graphiql\'),\n      );\n    </script>\n  </body>\n</html>\n'
+    b'<!--\n *  Copyright (c) 2021 GraphQL Contributors\n *  All rights reserved.\n *\n *  This source code is licensed under the license found in the\n *  LICENSE file in the root directory of this source tree.\n-->\n<!DOCTYPE html>\n<html>\n  <head>\n    <meta charset="utf-8" />\n    <meta name="viewport" content="user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui">\n    <title>Ariadne GraphQL</title>\n    <style>\n      body {\n        height: 100%;\n        margin: 0;\n        width: 100%;\n        overflow: hidden;\n      }\n\n      #graphiql {\n        height: 100vh;\n      }\n\n      #graphiql-loading {\n        height: 100%;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n\n        color: #545454;\n        font-size: 1.5em;\n        font-family: sans-serif;\n        font-weight: bold;\n      }\n    </style>\n    <link rel="stylesheet" href="https://unpkg.com/graphiql/graphiql.min.css" />\n    \n  </head>\n\n  <body>\n    <div id="graphiql">\n      <div id="graphiql-loading">Loading Ariadne GraphQL...</div>\n    </div>\n\n    <script\n      crossorigin\n      src="https://unpkg.com/react@17/umd/react.production.min.js"\n    ></script>\n    <script\n      crossorigin\n      src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"\n    ></script>\n\n    <script\n      crossorigin\n      src="https://unpkg.com/graphiql/graphiql.min.js"\n    ></script>\n\n    \n\n    <script>\n      var fetcher = GraphiQL.createFetcher({\n        url: window.location.href,\n      });\n\n      function AriadneGraphiQL() {\n        var [query, setQuery] = React.useState(\n          \'#\\n# GraphiQL is an in -browser tool for writing, validating, and\\n# testing GraphQL queries.\\n#\\n# Type queries into this side of the screen, and you will see intelligent\\n# typeaheads aware of the current GraphQL type schema and live syntax and\\n# validation errors highlighted within the text.\\n#\\n# GraphQL queries typically start with a "{" character. Lines that start\\n# with a # are ignored.\\n#\\n# An example GraphQL query might look like:\\n#\\n#     {\\n#       field(arg: "value") {\\n#         subField\\n#\\n#       }\\n#\\n#     }\\n#\\n# Keyboard shortcuts:\\n#\\n#   Prettify query: Shift - Ctrl - P(or press the prettify button)\\n#\\n#  Merge fragments: Shift - Ctrl - M(or press the merge button)\\n#\\n#        Run Query: Ctrl - Enter(or press the play button)\\n#\\n#    Auto Complete: Ctrl - Space(or just start typing)\\n#\',\n        );\n        \n        return React.createElement(GraphiQL, {\n          fetcher: fetcher,\n          defaultEditorToolsVisibility: true,\n          \n          query: query,\n          onEditQuery: setQuery,\n        });\n      }\n\n      ReactDOM.render(\n        React.createElement(AriadneGraphiQL),\n        document.getElementById(\'graphiql\'),\n      );\n    </script>\n  </body>\n</html>\n'
 ]
 
 snapshots['test_graphiql_html_is_served_on_get_request 1'] = [
-    b'<!--\n *  Copyright (c) 2021 GraphQL Contributors\n *  All rights reserved.\n *\n *  This source code is licensed under the license found in the\n *  LICENSE file in the root directory of this source tree.\n-->\n<!DOCTYPE html>\n<html>\n  <head>\n    <meta charset="utf-8" />\n    <meta name="viewport" content="user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui">\n    <title>Ariadne GraphQL</title>\n    <style>\n      body {\n        height: 100%;\n        margin: 0;\n        width: 100%;\n        overflow: hidden;\n      }\n\n      #graphiql {\n        height: 100vh;\n      }\n\n      #graphiql-loading {\n        height: 100%;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n\n        color: #545454;\n        font-size: 1.5em;\n        font-family: sans-serif;\n        font-weight: bold;\n      }\n    </style>\n    <link rel="stylesheet" href="https://unpkg.com/graphiql/graphiql.min.css" />\n    \n  </head>\n\n  <body>\n    <div id="graphiql">\n      <div id="graphiql-loading">Loading Ariadne GraphQL...</div>\n    </div>\n\n    <script\n      crossorigin\n      src="https://unpkg.com/react@17/umd/react.development.js"\n    ></script>\n    <script\n      crossorigin\n      src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"\n    ></script>\n\n    <script\n      crossorigin\n      src="https://unpkg.com/graphiql/graphiql.min.js"\n    ></script>\n\n    \n\n    <script>\n      var fetcher = GraphiQL.createFetcher({\n        url: window.location.href,\n      });\n\n      function AriadneGraphiQL() {\n        var [query, setQuery] = React.useState(\n          \'#\\n# GraphiQL is an in -browser tool for writing, validating, and\\n# testing GraphQL queries.\\n#\\n# Type queries into this side of the screen, and you will see intelligent\\n# typeaheads aware of the current GraphQL type schema and live syntax and\\n# validation errors highlighted within the text.\\n#\\n# GraphQL queries typically start with a "{" character. Lines that start\\n# with a # are ignored.\\n#\\n# An example GraphQL query might look like:\\n#\\n#     {\\n#       field(arg: "value") {\\n#         subField\\n#\\n#       }\\n#\\n#     }\\n#\\n# Keyboard shortcuts:\\n#\\n#   Prettify query: Shift - Ctrl - P(or press the prettify button)\\n#\\n#  Merge fragments: Shift - Ctrl - M(or press the merge button)\\n#\\n#        Run Query: Ctrl - Enter(or press the play button)\\n#\\n#    Auto Complete: Ctrl - Space(or just start typing)\\n#\',\n        );\n        \n        return React.createElement(GraphiQL, {\n          fetcher: fetcher,\n          defaultEditorToolsVisibility: true,\n          \n          query: query,\n          onEditQuery: setQuery,\n        });\n      }\n\n      ReactDOM.render(\n        React.createElement(AriadneGraphiQL),\n        document.getElementById(\'graphiql\'),\n      );\n    </script>\n  </body>\n</html>\n'
+    b'<!--\n *  Copyright (c) 2021 GraphQL Contributors\n *  All rights reserved.\n *\n *  This source code is licensed under the license found in the\n *  LICENSE file in the root directory of this source tree.\n-->\n<!DOCTYPE html>\n<html>\n  <head>\n    <meta charset="utf-8" />\n    <meta name="viewport" content="user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui">\n    <title>Ariadne GraphQL</title>\n    <style>\n      body {\n        height: 100%;\n        margin: 0;\n        width: 100%;\n        overflow: hidden;\n      }\n\n      #graphiql {\n        height: 100vh;\n      }\n\n      #graphiql-loading {\n        height: 100%;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n\n        color: #545454;\n        font-size: 1.5em;\n        font-family: sans-serif;\n        font-weight: bold;\n      }\n    </style>\n    <link rel="stylesheet" href="https://unpkg.com/graphiql/graphiql.min.css" />\n    \n  </head>\n\n  <body>\n    <div id="graphiql">\n      <div id="graphiql-loading">Loading Ariadne GraphQL...</div>\n    </div>\n\n    <script\n      crossorigin\n      src="https://unpkg.com/react@17/umd/react.production.min.js"\n    ></script>\n    <script\n      crossorigin\n      src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"\n    ></script>\n\n    <script\n      crossorigin\n      src="https://unpkg.com/graphiql/graphiql.min.js"\n    ></script>\n\n    \n\n    <script>\n      var fetcher = GraphiQL.createFetcher({\n        url: window.location.href,\n      });\n\n      function AriadneGraphiQL() {\n        var [query, setQuery] = React.useState(\n          \'#\\n# GraphiQL is an in -browser tool for writing, validating, and\\n# testing GraphQL queries.\\n#\\n# Type queries into this side of the screen, and you will see intelligent\\n# typeaheads aware of the current GraphQL type schema and live syntax and\\n# validation errors highlighted within the text.\\n#\\n# GraphQL queries typically start with a "{" character. Lines that start\\n# with a # are ignored.\\n#\\n# An example GraphQL query might look like:\\n#\\n#     {\\n#       field(arg: "value") {\\n#         subField\\n#\\n#       }\\n#\\n#     }\\n#\\n# Keyboard shortcuts:\\n#\\n#   Prettify query: Shift - Ctrl - P(or press the prettify button)\\n#\\n#  Merge fragments: Shift - Ctrl - M(or press the merge button)\\n#\\n#        Run Query: Ctrl - Enter(or press the play button)\\n#\\n#    Auto Complete: Ctrl - Space(or just start typing)\\n#\',\n        );\n        \n        return React.createElement(GraphiQL, {\n          fetcher: fetcher,\n          defaultEditorToolsVisibility: true,\n          \n          query: query,\n          onEditQuery: setQuery,\n        });\n      }\n\n      ReactDOM.render(\n        React.createElement(AriadneGraphiQL),\n        document.getElementById(\'graphiql\'),\n      );\n    </script>\n  </body>\n</html>\n'
 ]
 
 snapshots['test_playground_html_is_served_on_get_request 1'] = [