Allow for easier template overrides in graphiql (#863)

benhowes · jkimbo · web-flow · commit 6b8c5bdefc20 · 2020-02-07T10:16:11.000Z
* don't replace &lt;body&gt;

* Update graphene_django/templates/graphene/graphiql.html

Co-Authored-By: Jonathan Kim &lt;jkimbo@gmail.com&gt;

* Fix editor styling and initialisation

Co-authored-by: Jonathan Kim &lt;jkimbo@gmail.com&gt;
diff --git a/graphene_django/static/graphene_django/graphiql.js b/graphene_django/static/graphene_django/graphiql.js
@@ -97,6 +97,6 @@
   // Render <GraphiQL /> into the body.
   ReactDOM.render(
     React.createElement(GraphiQL, options),
-    document.body
+    document.getElementById("editor")
   );
 })();
diff --git a/graphene_django/templates/graphene/graphiql.html b/graphene_django/templates/graphene/graphiql.html
@@ -10,7 +10,7 @@
 <html>
 <head>
   <style>
-    html, body {
+    html, body, #editor {
       height: 100%;
       margin: 0;
       overflow: hidden;
@@ -31,6 +31,7 @@
           crossorigin="anonymous"></script>
 </head>
 <body>
+  <div id="editor"></div>
   {% csrf_token %}
   <script src="{% static 'graphene_django/graphiql.js' %}"></script>
 </body>
