graphql-python/graphene-django
1
1
Fork 0
mirror of https://github.com/graphql-python/graphene-django.git synced 2024-11-10 19:57:15 +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,
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,

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"
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>

5
graphene_django/views.py
View File

@ -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,