Repository: mirumee/ariadne (language: python)

Issue:
GraphiQL is not rendering (Explorer plugin error)
## Problem

There is a deprecated link to download GraphiQL explorer plugin in [the GraphiQL template](https://github.com/mirumee/ariadne/blob/d94a05eef136a333d66cb81ff650eedabbca9a4d/ariadne/explorer/templates/graphiql.html#L66). It results in a 404 error that unable to render the GraphiQL Playground when Explorer plugin is activated.

![image](https://github.com/mirumee/ariadne/assets/52968530/7380a2fc-6df4-451a-8766-0dc68c341bbd)

## Solution

Replace `graphiql-plugin-explorer.umd.js` file for `index.umd.js` file.


GraphiQL is not rendering (Explorer plugin error)
## Problem

There is a deprecated link to download GraphiQL explorer plugin in [the GraphiQL template](https://github.com/mirumee/ariadne/blob/d94a05eef136a333d66cb81ff650eedabbca9a4d/ariadne/explorer/templates/graphiql.html#L66). It results in a 404 error that unable to render the GraphiQL Playground when Explorer plugin is activated.

![image](https://github.com/mirumee/ariadne/assets/52968530/7380a2fc-6df4-451a-8766-0dc68c341bbd)

## Solution

Replace `graphiql-plugin-explorer.umd.js` file for `index.umd.js` file.




Discussion / hints:

Fix patch:
diff --git a/ariadne/explorer/templates/graphiql.html b/ariadne/explorer/templates/graphiql.html
index b7775abdf..b52fbdb41 100644
--- a/ariadne/explorer/templates/graphiql.html
+++ b/ariadne/explorer/templates/graphiql.html
@@ -35,9 +35,9 @@
         font-weight: bold;
       }
     </style>
-    <link rel="stylesheet" href="https://unpkg.com/graphiql/graphiql.min.css" />
+    <link rel="stylesheet" href="https://unpkg.com/graphiql@3.0.0/graphiql.min.css" />
     {% if enable_explorer_plugin %}
-    <link rel="stylesheet" href="https://unpkg.com/@graphiql/plugin-explorer/dist/style.css" />
+    <link rel="stylesheet" href="https://unpkg.com/@graphiql/plugin-explorer@0.1.21/dist/style.css" />
     {% endif %}
   </head>
 
@@ -57,13 +57,13 @@
 
     <script
       crossorigin
-      src="https://unpkg.com/graphiql/graphiql.min.js"
+      src="https://unpkg.com/graphiql@3.0.0/graphiql.min.js"
     ></script>
 
     {% if enable_explorer_plugin %}
     <script
       crossorigin
-      src="https://unpkg.com/@graphiql/plugin-explorer/dist/graphiql-plugin-explorer.umd.js"
+      src="https://unpkg.com/@graphiql/plugin-explorer@0.1.21/dist/index.umd.js"
     ></script>
     {% endif %}
 


Test patch:
diff --git a/tests/asgi/snapshots/snap_test_explorer.py b/tests/asgi/snapshots/snap_test_explorer.py
index a38e0ae58..7d39910ce 100644
--- a/tests/asgi/snapshots/snap_test_explorer.py
+++ b/tests/asgi/snapshots/snap_test_explorer.py
@@ -80,7 +80,7 @@
         font-weight: bold;
       }
     </style>
-    <link rel="stylesheet" href="https://unpkg.com/graphiql/graphiql.min.css" />
+    <link rel="stylesheet" href="https://unpkg.com/graphiql@3.0.0/graphiql.min.css" />
     
   </head>
 
@@ -100,7 +100,7 @@
 
     <script
       crossorigin
-      src="https://unpkg.com/graphiql/graphiql.min.js"
+      src="https://unpkg.com/graphiql@3.0.0/graphiql.min.js"
     ></script>
 
     
@@ -170,7 +170,7 @@
         font-weight: bold;
       }
     </style>
-    <link rel="stylesheet" href="https://unpkg.com/graphiql/graphiql.min.css" />
+    <link rel="stylesheet" href="https://unpkg.com/graphiql@3.0.0/graphiql.min.css" />
     
   </head>
 
@@ -190,7 +190,7 @@
 
     <script
       crossorigin
-      src="https://unpkg.com/graphiql/graphiql.min.js"
+      src="https://unpkg.com/graphiql@3.0.0/graphiql.min.js"
     ></script>
 
     
diff --git a/tests/explorers/snapshots/snap_test_explorers.py b/tests/explorers/snapshots/snap_test_explorers.py
index d82ca4f5e..8457414bb 100644
--- a/tests/explorers/snapshots/snap_test_explorers.py
+++ b/tests/explorers/snapshots/snap_test_explorers.py
@@ -78,9 +78,9 @@
         font-weight: bold;
       }
     </style>
-    <link rel="stylesheet" href="https://unpkg.com/graphiql/graphiql.min.css" />
+    <link rel="stylesheet" href="https://unpkg.com/graphiql@3.0.0/graphiql.min.css" />
     
-    <link rel="stylesheet" href="https://unpkg.com/@graphiql/plugin-explorer/dist/style.css" />
+    <link rel="stylesheet" href="https://unpkg.com/@graphiql/plugin-explorer@0.1.21/dist/style.css" />
     
   </head>
 
@@ -100,13 +100,13 @@
 
     <script
       crossorigin
-      src="https://unpkg.com/graphiql/graphiql.min.js"
+      src="https://unpkg.com/graphiql@3.0.0/graphiql.min.js"
     ></script>
 
     
     <script
       crossorigin
-      src="https://unpkg.com/@graphiql/plugin-explorer/dist/graphiql-plugin-explorer.umd.js"
+      src="https://unpkg.com/@graphiql/plugin-explorer@0.1.21/dist/index.umd.js"
     ></script>
     
 
@@ -182,7 +182,7 @@
         font-weight: bold;
       }
     </style>
-    <link rel="stylesheet" href="https://unpkg.com/graphiql/graphiql.min.css" />
+    <link rel="stylesheet" href="https://unpkg.com/graphiql@3.0.0/graphiql.min.css" />
     
   </head>
 
@@ -202,7 +202,7 @@
 
     <script
       crossorigin
-      src="https://unpkg.com/graphiql/graphiql.min.js"
+      src="https://unpkg.com/graphiql@3.0.0/graphiql.min.js"
     ></script>
 
     
diff --git a/tests/wsgi/snapshots/snap_test_explorer.py b/tests/wsgi/snapshots/snap_test_explorer.py
index 972c4e0ac..2725e9771 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.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'
+    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@3.0.0/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@3.0.0/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.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'
+    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@3.0.0/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@3.0.0/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'] = [