mirror of
https://github.com/graphql-python/graphene-django.git
synced 2025-04-13 05:34:20 +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"
|
||||
and as a result has been presented GraphiQL - an in-browser IDE for
|
||||
exploring GraphQL.
|
||||
If you wish to receive JSON, provide the header "Accept: application/json" or
|
||||
add "&raw" to the end of the URL within a browser.
|
||||
* Copyright (c) 2021 GraphQL Contributors
|
||||
* All rights reserved.
|
||||
*
|
||||
* This source code is licensed under the license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
-->
|
||||
{% load static %}
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
html, body, #editor {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
<link href="https://cdn.jsdelivr.net/npm/graphiql@{{graphiql_version}}/graphiql.min.css"
|
||||
integrity="{{graphiql_css_sri}}"
|
||||
rel="stylesheet"
|
||||
crossorigin="anonymous" />
|
||||
<script src="https://cdn.jsdelivr.net/npm/whatwg-fetch@{{whatwg_fetch_version}}/dist/fetch.umd.js"
|
||||
integrity="{{whatwg_fetch_sri}}"
|
||||
crossorigin="anonymous"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/react@{{react_version}}/umd/react.production.min.js"
|
||||
integrity="{{react_sri}}"
|
||||
crossorigin="anonymous"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/react-dom@{{react_version}}/umd/react-dom.production.min.js"
|
||||
integrity="{{react_dom_sri}}"
|
||||
crossorigin="anonymous"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/graphiql@{{graphiql_version}}/graphiql.min.js"
|
||||
integrity="{{graphiql_sri}}"
|
||||
crossorigin="anonymous"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/subscriptions-transport-ws@{{subscriptions_transport_ws_version}}/browser/client.js"
|
||||
integrity="{{subscriptions_transport_ws_sri}}"
|
||||
crossorigin="anonymous"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="editor"></div>
|
||||
{% csrf_token %}
|
||||
<script type="application/javascript">
|
||||
window.GRAPHENE_SETTINGS = {
|
||||
{% if subscription_path %}
|
||||
subscriptionPath: "{{subscription_path}}",
|
||||
{% endif %}
|
||||
graphiqlHeaderEditorEnabled: {{ graphiql_header_editor_enabled|yesno:"true,false" }},
|
||||
graphiqlShouldPersistHeaders: {{ graphiql_should_persist_headers|yesno:"true,false" }},
|
||||
};
|
||||
</script>
|
||||
<script src="{% static 'graphene_django/graphiql.js' %}"></script>
|
||||
</body>
|
||||
</html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>GraphiQL</title>
|
||||
<style>
|
||||
body {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#graphiql {
|
||||
height: 100vh;
|
||||
}
|
||||
</style>
|
||||
|
||||
<!--
|
||||
This GraphiQL example depends on Promise and fetch, which are available in
|
||||
modern browsers, but can be "polyfilled" for older browsers.
|
||||
GraphiQL itself depends on React DOM.
|
||||
If you do not want to rely on a CDN, you can host these files locally or
|
||||
include them directly in your favored resource bundler.
|
||||
-->
|
||||
<script
|
||||
src="https://unpkg.com/react@17/umd/react.development.js"
|
||||
integrity="sha512-Vf2xGDzpqUOEIKO+X2rgTLWPY+65++WPwCHkX2nFMu9IcstumPsf/uKKRd5prX3wOu8Q0GBylRpsDB26R6ExOg=="
|
||||
crossorigin="anonymous"
|
||||
></script>
|
||||
<script
|
||||
src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
|
||||
integrity="sha512-Wr9OKCTtq1anK0hq5bY3X/AvDI5EflDSAh0mE9gma+4hl+kXdTJPKZ3TwLMBcrgUeoY0s3dq9JjhCQc7vddtFg=="
|
||||
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>
|
||||
|
||||
<body>
|
||||
<div id="graphiql">Loading...</div>
|
||||
<script
|
||||
src="https://unpkg.com/graphiql/graphiql.min.js"
|
||||
type="application/javascript"
|
||||
></script>
|
||||
<script>
|
||||
ReactDOM.render(
|
||||
React.createElement(GraphiQL, {
|
||||
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>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -147,17 +147,6 @@ class GraphQLView(View):
|
|||
if show_graphiql:
|
||||
return self.render_graphiql(
|
||||
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.
|
||||
subscription_path=self.subscription_path,
|
||||
# GraphiQL headers tab,
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user