diff --git a/graphene_django/static/graphene_django/graphiql.js b/graphene_django/static/graphene_django/graphiql.js
index 5b9d96d..901c991 100644
--- 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 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
index 8fb00c4..ddff8fc 100644
--- a/graphene_django/templates/graphene/graphiql.html
+++ b/graphene_django/templates/graphene/graphiql.html
@@ -36,6 +36,9 @@ add "&raw" to the end of the URL within a browser.
+
diff --git a/graphene_django/views.py b/graphene_django/views.py
index b29aeed..d4d98b7 100644
--- 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 @@ class GraphQLView(View):
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,