Add GraphiQL Explorer plugin

kiendang · kiendang · commit 80114fcd9eb7 · 2023-05-04T19:15:35.000+08:00
diff --git a/graphene_django/static/graphene_django/graphiql.js b/graphene_django/static/graphene_django/graphiql.js
@@ -6,6 +6,7 @@
   React,
   ReactDOM,
   graphqlWs,
+  GraphiQLPluginExplorer,
   fetch,
   history,
   location,
@@ -98,24 +99,44 @@
   function updateURL() {
     history.replaceState(null, null, locationQuery(parameters));
   }
-  var options = {
-    fetcher: graphQLFetcher,
-    onEditQuery: onEditQuery,
-    onEditVariables: onEditVariables,
-    onEditOperationName: onEditOperationName,
-    isHeadersEditorEnabled: GRAPHENE_SETTINGS.graphiqlHeaderEditorEnabled,
-    shouldPersistHeaders: GRAPHENE_SETTINGS.graphiqlShouldPersistHeaders,
-    query: parameters.query,
-  };
-  if (parameters.variables) {
-    options.variables = parameters.variables;
-  }
-  if (parameters.operation_name) {
-    options.operationName = parameters.operation_name;
+
+  function GraphiQLWithExplorer() {
+    var [query, setQuery] = React.useState(parameters.query);
+
+    function handleQuery(query) {
+      setQuery(query);
+      onEditQuery(query);
+    }
+
+    var explorerPlugin = GraphiQLPluginExplorer.useExplorerPlugin({
+      query: query,
+      onEdit: handleQuery,
+    });
+
+    var options = {
+      fetcher: graphQLFetcher,
+      plugins: [explorerPlugin],
+      defaultEditorToolsVisibility: true,
+      onEditQuery: handleQuery,
+      onEditVariables: onEditVariables,
+      onEditOperationName: onEditOperationName,
+      isHeadersEditorEnabled: GRAPHENE_SETTINGS.graphiqlHeaderEditorEnabled,
+      shouldPersistHeaders: GRAPHENE_SETTINGS.graphiqlShouldPersistHeaders,
+      query: query,
+    };
+    if (parameters.variables) {
+      options.variables = parameters.variables;
+    }
+    if (parameters.operation_name) {
+      options.operationName = parameters.operation_name;
+    }
+
+    return React.createElement(GraphiQL, options);
   }
+
   // Render <GraphiQL /> into the body.
   ReactDOM.render(
-    React.createElement(GraphiQL, options),
+    React.createElement(GraphiQLWithExplorer),
     document.getElementById("editor"),
   );
 })(
@@ -126,6 +147,7 @@
   window.React,
   window.ReactDOM,
   window.graphqlWs,
+  window.GraphiQLPluginExplorer,
   window.fetch,
   window.history,
   window.location,
diff --git a/graphene_django/templates/graphene/graphiql.html b/graphene_django/templates/graphene/graphiql.html
@@ -36,6 +36,9 @@
   <script src="https://cdn.jsdelivr.net/npm/graphql-ws@{{subscriptions_transport_ws_version}}/umd/graphql-ws.min.js"
           integrity="{{subscriptions_transport_ws_sri}}"
           crossorigin="anonymous"></script>
+  <script src="https://cdn.jsdelivr.net/npm/@graphiql/plugin-explorer@{{graphiql_plugin_explorer_version}}/dist/graphiql-plugin-explorer.umd.js"
+          integrity="{{graphiql_plugin_explorer_sri}}"
+          crossorigin="anonymous"></script>
 </head>
 <body>
   <div id="editor"></div>
diff --git a/graphene_django/views.py b/graphene_django/views.py
@@ -76,6 +76,9 @@ class GraphQLView(View):
         "sha256-EZhvg6ANJrBsgLvLAa0uuHNLepLJVCFYS+xlb5U/bqw="
     )
 
+    graphiql_plugin_explorer_version = "0.1.15"
+    graphiql_plugin_explorer_sri = "sha256-3hUuhBXdXlfCj6RTeEkJFtEh/kUG+TCDASFpFPLrzvE="
+
     schema = None
     graphiql = False
     middleware = None
@@ -158,6 +161,8 @@ def dispatch(self, request, *args, **kwargs):
                     graphiql_css_sri=self.graphiql_css_sri,
                     subscriptions_transport_ws_version=self.subscriptions_transport_ws_version,
                     subscriptions_transport_ws_sri=self.subscriptions_transport_ws_sri,
+                    graphiql_plugin_explorer_version=self.graphiql_plugin_explorer_version,
+                    graphiql_plugin_explorer_sri=self.graphiql_plugin_explorer_sri,
                     # The SUBSCRIPTION_PATH setting.
                     subscription_path=self.subscription_path,
                     # GraphiQL headers tab,
