graphql-python/graphene-django
1
1
Fork 0
mirror of https://github.com/graphql-python/graphene-django.git synced 2025-06-15 11:03:25 +03:00
Code Issues Packages Projects Releases Wiki Activity

Add GraphiQL Explorer plugin (#1397)

Browse Source
This commit is contained in:
Kien Dang 2023-05-05 03:06:10 +08:00 committed by GitHub
parent 8540a9332c
commit 52f992183f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 45 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
graphene_django/static/graphene_django/graphiql.js
View File

@ -6,6 +6,7 @@
React, React,
ReactDOM, ReactDOM,
graphqlWs, graphqlWs,
GraphiQLPluginExplorer,
fetch, fetch,
history, history,
location, location,
@ -98,24 +99,44 @@
function updateURL() { function updateURL() {
history.replaceState(null, null, locationQuery(parameters)); history.replaceState(null, null, locationQuery(parameters));
} }
var options = {
fetcher: graphQLFetcher, function GraphiQLWithExplorer() {
onEditQuery: onEditQuery, var [query, setQuery] = React.useState(parameters.query);
onEditVariables: onEditVariables,
onEditOperationName: onEditOperationName, function handleQuery(query) {
isHeadersEditorEnabled: GRAPHENE_SETTINGS.graphiqlHeaderEditorEnabled, setQuery(query);
shouldPersistHeaders: GRAPHENE_SETTINGS.graphiqlShouldPersistHeaders, onEditQuery(query);
query: parameters.query, }
};
if (parameters.variables) { var explorerPlugin = GraphiQLPluginExplorer.useExplorerPlugin({
options.variables = parameters.variables; query: query,
} onEdit: handleQuery,
if (parameters.operation_name) { });
options.operationName = parameters.operation_name;
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. // Render <GraphiQL /> into the body.
ReactDOM.render( ReactDOM.render(
React.createElement(GraphiQL, options), React.createElement(GraphiQLWithExplorer),
document.getElementById("editor"), document.getElementById("editor"),
); );
})( })(
@ -126,6 +147,7 @@
window.React, window.React,
window.ReactDOM, window.ReactDOM,
window.graphqlWs, window.graphqlWs,
window.GraphiQLPluginExplorer,
window.fetch, window.fetch,
window.history, window.history,
window.location, window.location,

3
graphene_django/templates/graphene/graphiql.html
View File

@ -36,6 +36,9 @@ add "&raw" to the end of the URL within a browser.
<script src="https://cdn.jsdelivr.net/npm/graphql-ws@{{subscriptions_transport_ws_version}}/umd/graphql-ws.min.js" <script src="https://cdn.jsdelivr.net/npm/graphql-ws@{{subscriptions_transport_ws_version}}/umd/graphql-ws.min.js"
integrity="{{subscriptions_transport_ws_sri}}" integrity="{{subscriptions_transport_ws_sri}}"
crossorigin="anonymous"></script> 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> </head>
<body> <body>
<div id="editor"></div> <div id="editor"></div>

5
graphene_django/views.py
View File

@ -76,6 +76,9 @@ class GraphQLView(View):
"sha256-EZhvg6ANJrBsgLvLAa0uuHNLepLJVCFYS+xlb5U/bqw=" "sha256-EZhvg6ANJrBsgLvLAa0uuHNLepLJVCFYS+xlb5U/bqw="
) )
graphiql_plugin_explorer_version = "0.1.15"
graphiql_plugin_explorer_sri = "sha256-3hUuhBXdXlfCj6RTeEkJFtEh/kUG+TCDASFpFPLrzvE="
schema = None schema = None
graphiql = False graphiql = False
middleware = None middleware = None
@ -158,6 +161,8 @@ class GraphQLView(View):
graphiql_css_sri=self.graphiql_css_sri, graphiql_css_sri=self.graphiql_css_sri,
subscriptions_transport_ws_version=self.subscriptions_transport_ws_version, subscriptions_transport_ws_version=self.subscriptions_transport_ws_version,
subscriptions_transport_ws_sri=self.subscriptions_transport_ws_sri, 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. # The SUBSCRIPTION_PATH setting.
subscription_path=self.subscription_path, subscription_path=self.subscription_path,
# GraphiQL headers tab, # GraphiQL headers tab,