mirror of
https://github.com/graphql-python/graphene-django.git
synced 2025-07-01 10:53:13 +03:00
update graphiql template to the latest
This commit is contained in:
khasbilegt
parent
4517e32224
commit
a205aad82c
|
|
@ -1,206 +0,0 @@
|
||||||
(function (
|
|
||||||
document,
|
|
||||||
|
|
||||||
GRAPHENE_SETTINGS,
|
|
||||||
GraphiQL,
|
|
||||||
React,
|
|
||||||
ReactDOM,
|
|
||||||
SubscriptionsTransportWs,
|
|
||||||
fetch,
|
|
||||||
history,
|
|
||||||
location,
|
|
||||||
) {
|
|
||||||
|
|
||||||
// Collect the URL parameters
|
|
||||||
var parameters = {};
|
|
||||||
location.hash
|
|
||||||
.substr(1)
|
|
||||||
.split("&")
|
|
||||||
.forEach(function (entry) {
|
|
||||||
var eq = entry.indexOf("=");
|
|
||||||
if (eq >= 0) {
|
|
||||||
parameters[decodeURIComponent(entry.slice(0, eq))] = decodeURIComponent(
|
|
||||||
entry.slice(eq + 1),
|
|
||||||
);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
// Produce a Location fragment string from a parameter object.
|
|
||||||
function locationQuery(params) {
|
|
||||||
return (
|
|
||||||
"#" +
|
|
||||||
Object.keys(params)
|
|
||||||
.map(function (key) {
|
|
||||||
return (
|
|
||||||
encodeURIComponent(key) + "=" + encodeURIComponent(params[key])
|
|
||||||
);
|
|
||||||
})
|
|
||||||
.join("&")
|
|
||||||
);
|
|
||||||
}
|
|
||||||
// Derive a fetch URL from the current URL, sans the GraphQL parameters.
|
|
||||||
var graphqlParamNames = {
|
|
||||||
query: true,
|
|
||||||
variables: true,
|
|
||||||
operationName: true,
|
|
||||||
};
|
|
||||||
var otherParams = {};
|
|
||||||
for (var k in parameters) {
|
|
||||||
if (parameters.hasOwnProperty(k) && graphqlParamNames[k] !== true) {
|
|
||||||
otherParams[k] = parameters[k];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
var fetchURL = locationQuery(otherParams);
|
|
||||||
|
|
||||||
// Defines a GraphQL fetcher using the fetch API.
|
|
||||||
function httpClient(graphQLParams, opts) {
|
|
||||||
if (typeof opts === 'undefined') {
|
|
||||||
opts = {};
|
|
||||||
}
|
|
||||||
var headers = opts.headers || {};
|
|
||||||
headers['Accept'] = headers['Accept'] || 'application/json';
|
|
||||||
headers['Content-Type'] = headers['Content-Type'] || 'application/json';
|
|
||||||
|
|
||||||
// Parse the cookie value for a CSRF token
|
|
||||||
var csrftoken;
|
|
||||||
var cookies = ("; " + document.cookie).split("; csrftoken=");
|
|
||||||
if (cookies.length == 2) {
|
|
||||||
csrftoken = cookies.pop().split(";").shift();
|
|
||||||
} else {
|
|
||||||
csrftoken = document.querySelector("[name=csrfmiddlewaretoken]").value;
|
|
||||||
}
|
|
||||||
if (csrftoken) {
|
|
||||||
headers['X-CSRFToken'] = csrftoken
|
|
||||||
}
|
|
||||||
|
|
||||||
return fetch(fetchURL, {
|
|
||||||
method: "post",
|
|
||||||
headers: headers,
|
|
||||||
body: JSON.stringify(graphQLParams),
|
|
||||||
credentials: "include",
|
|
||||||
})
|
|
||||||
.then(function (response) {
|
|
||||||
return response.text();
|
|
||||||
})
|
|
||||||
.then(function (responseBody) {
|
|
||||||
try {
|
|
||||||
return JSON.parse(responseBody);
|
|
||||||
} catch (error) {
|
|
||||||
return responseBody;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Derive the subscription URL. If the SUBSCRIPTION_URL setting is specified, uses that value. Otherwise
|
|
||||||
// assumes the current window location with an appropriate websocket protocol.
|
|
||||||
var subscribeURL =
|
|
||||||
location.origin.replace(/^http/, "ws") +
|
|
||||||
(GRAPHENE_SETTINGS.subscriptionPath || location.pathname);
|
|
||||||
|
|
||||||
// Create a subscription client.
|
|
||||||
var subscriptionClient = new SubscriptionsTransportWs.SubscriptionClient(
|
|
||||||
subscribeURL,
|
|
||||||
{
|
|
||||||
// Reconnect after any interruptions.
|
|
||||||
reconnect: true,
|
|
||||||
// Delay socket initialization until the first subscription is started.
|
|
||||||
lazy: true,
|
|
||||||
},
|
|
||||||
);
|
|
||||||
|
|
||||||
// Keep a reference to the currently-active subscription, if available.
|
|
||||||
var activeSubscription = null;
|
|
||||||
|
|
||||||
// Define a GraphQL fetcher that can intelligently route queries based on the operation type.
|
|
||||||
function graphQLFetcher(graphQLParams, opts) {
|
|
||||||
var operationType = getOperationType(graphQLParams);
|
|
||||||
|
|
||||||
// If we're about to execute a new operation, and we have an active subscription,
|
|
||||||
// unsubscribe before continuing.
|
|
||||||
if (activeSubscription) {
|
|
||||||
activeSubscription.unsubscribe();
|
|
||||||
activeSubscription = null;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (operationType === "subscription") {
|
|
||||||
return {
|
|
||||||
subscribe: function (observer) {
|
|
||||||
activeSubscription = subscriptionClient;
|
|
||||||
return subscriptionClient.request(graphQLParams, opts).subscribe(observer);
|
|
||||||
},
|
|
||||||
};
|
|
||||||
} else {
|
|
||||||
return httpClient(graphQLParams, opts);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Determine the type of operation being executed for a given set of GraphQL parameters.
|
|
||||||
function getOperationType(graphQLParams) {
|
|
||||||
// Run a regex against the query to determine the operation type (query, mutation, subscription).
|
|
||||||
var operationRegex = new RegExp(
|
|
||||||
// Look for lines that start with an operation keyword, ignoring whitespace.
|
|
||||||
"^\\s*(query|mutation|subscription)\\s*" +
|
|
||||||
// The operation keyword should be followed by whitespace and the operationName in the GraphQL parameters (if available).
|
|
||||||
(graphQLParams.operationName ? ("\\s+" + graphQLParams.operationName) : "") +
|
|
||||||
// The line should eventually encounter an opening curly brace.
|
|
||||||
"[^\\{]*\\{",
|
|
||||||
// Enable multiline matching.
|
|
||||||
"m",
|
|
||||||
);
|
|
||||||
var match = operationRegex.exec(graphQLParams.query);
|
|
||||||
if (!match) {
|
|
||||||
return "query";
|
|
||||||
}
|
|
||||||
|
|
||||||
return match[1];
|
|
||||||
}
|
|
||||||
|
|
||||||
// When the query and variables string is edited, update the URL bar so
|
|
||||||
// that it can be easily shared.
|
|
||||||
function onEditQuery(newQuery) {
|
|
||||||
parameters.query = newQuery;
|
|
||||||
updateURL();
|
|
||||||
}
|
|
||||||
function onEditVariables(newVariables) {
|
|
||||||
parameters.variables = newVariables;
|
|
||||||
updateURL();
|
|
||||||
}
|
|
||||||
function onEditOperationName(newOperationName) {
|
|
||||||
parameters.operationName = newOperationName;
|
|
||||||
updateURL();
|
|
||||||
}
|
|
||||||
function updateURL() {
|
|
||||||
history.replaceState(null, null, locationQuery(parameters));
|
|
||||||
}
|
|
||||||
var options = {
|
|
||||||
fetcher: graphQLFetcher,
|
|
||||||
onEditQuery: onEditQuery,
|
|
||||||
onEditVariables: onEditVariables,
|
|
||||||
onEditOperationName: onEditOperationName,
|
|
||||||
headerEditorEnabled: 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;
|
|
||||||
}
|
|
||||||
// Render <GraphiQL /> into the body.
|
|
||||||
ReactDOM.render(
|
|
||||||
React.createElement(GraphiQL, options),
|
|
||||||
document.getElementById("editor"),
|
|
||||||
);
|
|
||||||
})(
|
|
||||||
document,
|
|
||||||
|
|
||||||
window.GRAPHENE_SETTINGS,
|
|
||||||
window.GraphiQL,
|
|
||||||
window.React,
|
|
||||||
window.ReactDOM,
|
|
||||||
window.SubscriptionsTransportWs,
|
|
||||||
window.fetch,
|
|
||||||
window.history,
|
|
||||||
window.location,
|
|
||||||
);
|
|
||||||
|
|
@ -1,54 +1,71 @@
|
||||||
<!--
|
<!--
|
||||||
The request to this GraphQL server provided the header "Accept: text/html"
|
* Copyright (c) 2021 GraphQL Contributors
|
||||||
and as a result has been presented GraphiQL - an in-browser IDE for
|
* All rights reserved.
|
||||||
exploring GraphQL.
|
*
|
||||||
If you wish to receive JSON, provide the header "Accept: application/json" or
|
* This source code is licensed under the license found in the
|
||||||
add "&raw" to the end of the URL within a browser.
|
* LICENSE file in the root directory of this source tree.
|
||||||
-->
|
-->
|
||||||
{% load static %}
|
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
|
<title>GraphiQL</title>
|
||||||
<style>
|
<style>
|
||||||
html, body, #editor {
|
body {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
overflow: hidden;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
#graphiql {
|
||||||
|
height: 100vh;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<link href="https://cdn.jsdelivr.net/npm/graphiql@{{graphiql_version}}/graphiql.min.css"
|
|
||||||
integrity="{{graphiql_css_sri}}"
|
<!--
|
||||||
rel="stylesheet"
|
This GraphiQL example depends on Promise and fetch, which are available in
|
||||||
crossorigin="anonymous" />
|
modern browsers, but can be "polyfilled" for older browsers.
|
||||||
<script src="https://cdn.jsdelivr.net/npm/whatwg-fetch@{{whatwg_fetch_version}}/dist/fetch.umd.js"
|
GraphiQL itself depends on React DOM.
|
||||||
integrity="{{whatwg_fetch_sri}}"
|
If you do not want to rely on a CDN, you can host these files locally or
|
||||||
crossorigin="anonymous"></script>
|
include them directly in your favored resource bundler.
|
||||||
<script src="https://cdn.jsdelivr.net/npm/react@{{react_version}}/umd/react.production.min.js"
|
-->
|
||||||
integrity="{{react_sri}}"
|
<script
|
||||||
crossorigin="anonymous"></script>
|
src="https://unpkg.com/react@17/umd/react.development.js"
|
||||||
<script src="https://cdn.jsdelivr.net/npm/react-dom@{{react_version}}/umd/react-dom.production.min.js"
|
integrity="sha512-Vf2xGDzpqUOEIKO+X2rgTLWPY+65++WPwCHkX2nFMu9IcstumPsf/uKKRd5prX3wOu8Q0GBylRpsDB26R6ExOg=="
|
||||||
integrity="{{react_dom_sri}}"
|
crossorigin="anonymous"
|
||||||
crossorigin="anonymous"></script>
|
></script>
|
||||||
<script src="https://cdn.jsdelivr.net/npm/graphiql@{{graphiql_version}}/graphiql.min.js"
|
<script
|
||||||
integrity="{{graphiql_sri}}"
|
src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
|
||||||
crossorigin="anonymous"></script>
|
integrity="sha512-Wr9OKCTtq1anK0hq5bY3X/AvDI5EflDSAh0mE9gma+4hl+kXdTJPKZ3TwLMBcrgUeoY0s3dq9JjhCQc7vddtFg=="
|
||||||
<script src="https://cdn.jsdelivr.net/npm/subscriptions-transport-ws@{{subscriptions_transport_ws_version}}/browser/client.js"
|
crossorigin="anonymous"
|
||||||
integrity="{{subscriptions_transport_ws_sri}}"
|
></script>
|
||||||
crossorigin="anonymous"></script>
|
|
||||||
|
<!--
|
||||||
|
These two files can be found in the npm module, however you may wish to
|
||||||
|
copy them directly into your environment, or perhaps include them in your
|
||||||
|
favored resource bundler.
|
||||||
|
-->
|
||||||
|
<link rel="stylesheet" href="https://unpkg.com/graphiql/graphiql.min.css" />
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div id="editor"></div>
|
<div id="graphiql">Loading...</div>
|
||||||
{% csrf_token %}
|
<script
|
||||||
<script type="application/javascript">
|
src="https://unpkg.com/graphiql/graphiql.min.js"
|
||||||
window.GRAPHENE_SETTINGS = {
|
type="application/javascript"
|
||||||
{% if subscription_path %}
|
></script>
|
||||||
subscriptionPath: "{{subscription_path}}",
|
<script>
|
||||||
{% endif %}
|
ReactDOM.render(
|
||||||
graphiqlHeaderEditorEnabled: {{ graphiql_header_editor_enabled|yesno:"true,false" }},
|
React.createElement(GraphiQL, {
|
||||||
graphiqlShouldPersistHeaders: {{ graphiql_should_persist_headers|yesno:"true,false" }},
|
fetcher: GraphiQL.createFetcher({
|
||||||
};
|
url: "{{ request.path }}",
|
||||||
|
}),
|
||||||
|
defaultEditorToolsVisibility: true,
|
||||||
|
isHeadersEditorEnabled: {{ graphiql_header_editor_enabled|yesno:"true,false" }},
|
||||||
|
shouldPersistHeaders: {{ graphiql_should_persist_headers|yesno:"true,false" }},
|
||||||
|
}),
|
||||||
|
document.getElementById('graphiql'),
|
||||||
|
);
|
||||||
</script>
|
</script>
|
||||||
<script src="{% static 'graphene_django/graphiql.js' %}"></script>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
@ -147,17 +147,6 @@ class GraphQLView(View):
|
||||||
if show_graphiql:
|
if show_graphiql:
|
||||||
return self.render_graphiql(
|
return self.render_graphiql(
|
||||||
request,
|
request,
|
||||||
# Dependency parameters.
|
|
||||||
whatwg_fetch_version=self.whatwg_fetch_version,
|
|
||||||
whatwg_fetch_sri=self.whatwg_fetch_sri,
|
|
||||||
react_version=self.react_version,
|
|
||||||
react_sri=self.react_sri,
|
|
||||||
react_dom_sri=self.react_dom_sri,
|
|
||||||
graphiql_version=self.graphiql_version,
|
|
||||||
graphiql_sri=self.graphiql_sri,
|
|
||||||
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,
|
|
||||||
# The SUBSCRIPTION_PATH setting.
|
# The SUBSCRIPTION_PATH setting.
|
||||||
subscription_path=self.subscription_path,
|
subscription_path=self.subscription_path,
|
||||||
# GraphiQL headers tab,
|
# GraphiQL headers tab,
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user