graphene-django/graphene_django/templates/graphene/graphiql.html
Steven DeMartini 520ddeabf6
Fix graphiql explorer styles by including official CSS, and update local example app for testing (#1418)
* Add venv and .venv to gitignore since common venv paths

* Update cookbook-plain app requirements and local-dev notes

This also adds the DEFAULT_AUTO_FIELD to the app's Django settings to
resolve this warning when running `migrate`:

```
ingredients.Category: (models.W042) Auto-created primary key used when not defining a primary key type, by default 'django.db.models.AutoField'.
	HINT: Configure the DEFAULT_AUTO_FIELD setting or the IngredientsConfig.default_auto_field attribute to point to a subclass of AutoField, e.g. 'django.db.models.BigAutoField'.
```

* Fix #1417 graphiql explorer styles by including official CSS

Like in the official graphiql-plugin-explorer example here
6198646919/packages/graphiql-plugin-explorer/examples/index.html (L26-L29)

Resolves https://github.com/graphql-python/graphene-django/issues/1417

* Update GraphiQL version

---------

Co-authored-by: Steven DeMartini <sjdemartini@users.noreply.github.com>
Co-authored-by: Kien Dang <mail@kien.ai>
2023-06-02 11:48:53 +03:00

62 lines
2.6 KiB
HTML

<!--
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>
<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" />
<link href="https://cdn.jsdelivr.net/npm/@graphiql/plugin-explorer@{{graphiql_plugin_explorer_version}}/dist/style.css"
integrity="{{graphiql_plugin_explorer_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/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>
{% 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>