2021-07-29 13:48:06 -04:00
|
|
|
{% comment %}
|
2024-03-22 09:56:30 -07:00
|
|
|
This template derives from the strawberry-graphql project:
|
|
|
|
|
https://github.com/strawberry-graphql/strawberry/blob/main/strawberry/static/graphiql.html
|
2021-07-29 13:48:06 -04:00
|
|
|
{% endcomment %}
|
|
|
|
|
<!--
|
|
|
|
|
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.
|
|
|
|
|
-->
|
|
|
|
|
{% load static %}
|
|
|
|
|
<!DOCTYPE html>
|
2024-03-22 09:56:30 -07:00
|
|
|
<html>
|
2021-07-29 13:48:06 -04:00
|
|
|
<head>
|
2024-03-22 09:56:30 -07:00
|
|
|
<title>GraphiQL | NetBox</title>
|
|
|
|
|
<link
|
|
|
|
|
rel="icon"
|
|
|
|
|
href="data:image/svg+xml,
|
|
|
|
|
<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22>
|
|
|
|
|
<!-- Strawberry Emoji as a HTML Entity (hex) -->
|
|
|
|
|
<text y=%22.9em%22 font-size=%2280%22>🍓</text>
|
|
|
|
|
</svg>"
|
|
|
|
|
/>
|
2021-07-29 13:48:06 -04:00
|
|
|
<style>
|
2024-03-22 09:56:30 -07:00
|
|
|
body {
|
2021-07-29 13:48:06 -04:00
|
|
|
height: 100%;
|
|
|
|
|
margin: 0;
|
|
|
|
|
width: 100%;
|
2024-03-22 09:56:30 -07:00
|
|
|
overflow: hidden;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#graphiql {
|
|
|
|
|
height: 100vh;
|
|
|
|
|
display: flex;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.docExplorerHide {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.doc-explorer-contents {
|
|
|
|
|
overflow-y: hidden !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.docExplorerWrap {
|
|
|
|
|
width: unset !important;
|
|
|
|
|
min-width: unset !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.graphiql-explorer-actions select {
|
|
|
|
|
margin-left: 4px;
|
2021-07-29 13:48:06 -04:00
|
|
|
}
|
|
|
|
|
</style>
|
2024-03-22 09:56:30 -07:00
|
|
|
|
|
|
|
|
<script src="{% static 'graphiql/react.production.min.js' %}"></script>
|
|
|
|
|
<script src="{% static 'graphiql/react-dom.production.min.js' %}"></script>
|
|
|
|
|
<script src="{% static 'graphiql/js.cookie.min.js' %}"></script>
|
|
|
|
|
|
|
|
|
|
<link rel="stylesheet" href="{% static 'graphiql/graphiql.min.css' %}"/>
|
|
|
|
|
<link rel="stylesheet" href="{% static 'graphiql/plugin-explorer-style.css' %}"/>
|
2021-07-29 13:48:06 -04:00
|
|
|
</head>
|
2024-03-22 09:56:30 -07:00
|
|
|
|
2021-07-29 13:48:06 -04:00
|
|
|
<body>
|
2024-03-22 09:56:30 -07:00
|
|
|
<div id="graphiql" class="graphiql-container">Loading...</div>
|
|
|
|
|
<script src="{% static 'graphiql/graphiql.min.js' %}"></script>
|
|
|
|
|
<script src="{% static 'graphiql/index.umd.js' %}"></script>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
const EXAMPLE_QUERY = `# Welcome to GraphiQL 🍓
|
|
|
|
|
#
|
|
|
|
|
# GraphiQL is an in-browser tool for writing, validating, and
|
|
|
|
|
# testing GraphQL queries.
|
|
|
|
|
#
|
|
|
|
|
# Type queries into this side of the screen, and you will see intelligent
|
|
|
|
|
# typeaheads aware of the current GraphQL type schema and live syntax and
|
|
|
|
|
# validation errors highlighted within the text.
|
|
|
|
|
#
|
|
|
|
|
# GraphQL queries typically start with a "{" character. Lines that starts
|
|
|
|
|
# with a # are ignored.
|
|
|
|
|
#
|
|
|
|
|
# An example GraphQL query might look like:
|
|
|
|
|
#
|
|
|
|
|
# {
|
|
|
|
|
# field(arg: "value") {
|
|
|
|
|
# subField
|
|
|
|
|
# }
|
|
|
|
|
# }
|
|
|
|
|
#
|
|
|
|
|
# Keyboard shortcuts:
|
|
|
|
|
#
|
|
|
|
|
# Run Query: Ctrl-Enter (or press the play button above)
|
|
|
|
|
#
|
|
|
|
|
# Auto Complete: Ctrl-Space (or just start typing)
|
|
|
|
|
#
|
|
|
|
|
`;
|
|
|
|
|
|
|
|
|
|
const fetchURL = window.location.href;
|
|
|
|
|
|
|
|
|
|
function httpUrlToWebSockeUrl(url) {
|
|
|
|
|
const parsedURL = new URL(url);
|
|
|
|
|
const protocol = parsedURL.protocol === "http:" ? "ws:" : "wss:";
|
|
|
|
|
parsedURL.protocol = protocol;
|
|
|
|
|
parsedURL.hash = "";
|
|
|
|
|
return parsedURL.toString();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const headers = {};
|
|
|
|
|
const csrfToken = Cookies.get("csrftoken");
|
|
|
|
|
|
|
|
|
|
if (csrfToken) {
|
|
|
|
|
headers["x-csrftoken"] = csrfToken;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const subscriptionsEnabled = JSON.parse("{{ SUBSCRIPTION_ENABLED }}");
|
|
|
|
|
const subscriptionUrl = subscriptionsEnabled
|
|
|
|
|
? httpUrlToWebSockeUrl(fetchURL)
|
|
|
|
|
: null;
|
|
|
|
|
|
|
|
|
|
const fetcher = GraphiQL.createFetcher({
|
|
|
|
|
url: fetchURL,
|
|
|
|
|
headers: headers,
|
|
|
|
|
subscriptionUrl,
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
const explorerPlugin = GraphiQLPluginExplorer.explorerPlugin();
|
|
|
|
|
|
|
|
|
|
const root = ReactDOM.createRoot(document.getElementById("graphiql"));
|
|
|
|
|
|
|
|
|
|
root.render(
|
|
|
|
|
React.createElement(GraphiQL, {
|
|
|
|
|
fetcher: fetcher,
|
|
|
|
|
defaultEditorToolsVisibility: true,
|
|
|
|
|
plugins: [explorerPlugin],
|
|
|
|
|
inputValueDeprecation: true,
|
|
|
|
|
}),
|
|
|
|
|
);
|
2021-07-31 23:49:48 -07:00
|
|
|
</script>
|
2021-07-29 13:48:06 -04:00
|
|
|
</body>
|
|
|
|
|
</html>
|
