From 55769e814f3fc3da6c6d39696d6d1460fd8c9c89 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rados=C5=82aw=20Kowalski?= <radek.kwlsk@gmail.com>
Date: Fri, 7 Aug 2020 11:13:26 +0200
Subject: [PATCH] Add headers support to GraphiQL (#1016)

Co-authored-by: Jonathan Kim <jkimbo@gmail.com>
---
 docs/settings.rst                             | 21 +++++++++++++++++++
 graphene_django/settings.py                   |  4 ++++
 .../static/graphene_django/graphiql.js        | 19 ++++++++++-------
 .../templates/graphene/graphiql.html          |  1 +
 graphene_django/views.py                      |  2 ++
 5 files changed, 39 insertions(+), 8 deletions(-)

diff --git a/docs/settings.rst b/docs/settings.rst
index c2f8600..1e82e70 100644
--- a/docs/settings.rst
+++ b/docs/settings.rst
@@ -186,3 +186,24 @@ Default: ``None``
    GRAPHENE = {
       'SUBSCRIPTION_PATH': "/ws/graphql"
    }
+
+
+``GRAPHIQL_HEADER_EDITOR_ENABLED``
+---------------------
+
+GraphiQL starting from version 1.0.0 allows setting custom headers in similar fashion to query variables.
+
+Set to ``False`` if you want to disable GraphiQL headers editor tab for some reason.
+
+This setting is passed to ``headerEditorEnabled`` GraphiQL options, for details refer to GraphiQLDocs_.
+
+.. _GraphiQLDocs: https://github.com/graphql/graphiql/tree/main/packages/graphiql#options
+
+
+Default: ``True``
+
+.. code:: python
+
+   GRAPHENE = {
+      'GRAPHIQL_HEADER_EDITOR_ENABLED': True,
+   }
diff --git a/graphene_django/settings.py b/graphene_django/settings.py
index 52cca89..71b791c 100644
--- a/graphene_django/settings.py
+++ b/graphene_django/settings.py
@@ -41,6 +41,10 @@ DEFAULTS = {
     "DJANGO_CHOICE_FIELD_ENUM_CUSTOM_NAME": None,
     # Use a separate path for handling subscriptions.
     "SUBSCRIPTION_PATH": None,
+    # By default GraphiQL headers editor tab is enabled, set to False to hide it
+    # This sets headerEditorEnabled GraphiQL option, for details go to
+    # https://github.com/graphql/graphiql/tree/main/packages/graphiql#options
+    "GRAPHIQL_HEADER_EDITOR_ENABLED": True,
 }
 
 if settings.DEBUG:
diff --git a/graphene_django/static/graphene_django/graphiql.js b/graphene_django/static/graphene_django/graphiql.js
index 45f8ad7..8c3b5ce 100644
--- a/graphene_django/static/graphene_django/graphiql.js
+++ b/graphene_django/static/graphene_django/graphiql.js
@@ -61,13 +61,15 @@
   var fetchURL = locationQuery(otherParams);
 
   // Defines a GraphQL fetcher using the fetch API.
-  function httpClient(graphQLParams) {
-    var headers = {
-      Accept: "application/json",
-      "Content-Type": "application/json",
-    };
+  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';
     if (csrftoken) {
-      headers["X-CSRFToken"] = csrftoken;
+      headers['X-CSRFToken'] = csrftoken
     }
     return fetch(fetchURL, {
       method: "post",
@@ -108,7 +110,7 @@
   var activeSubscription = null;
 
   // Define a GraphQL fetcher that can intelligently route queries based on the operation type.
-  function graphQLFetcher(graphQLParams) {
+  function graphQLFetcher(graphQLParams, opts) {
     var operationType = getOperationType(graphQLParams);
 
     // If we're about to execute a new operation, and we have an active subscription,
@@ -126,7 +128,7 @@
         },
       };
     } else {
-      return httpClient(graphQLParams);
+      return httpClient(graphQLParams, opts);
     }
   }
 
@@ -173,6 +175,7 @@
     onEditQuery: onEditQuery,
     onEditVariables: onEditVariables,
     onEditOperationName: onEditOperationName,
+    headerEditorEnabled: GRAPHENE_SETTINGS.graphiqlHeaderEditorEnabled,
     query: parameters.query,
   };
   if (parameters.variables) {
diff --git a/graphene_django/templates/graphene/graphiql.html b/graphene_django/templates/graphene/graphiql.html
index abc4b52..cec4893 100644
--- a/graphene_django/templates/graphene/graphiql.html
+++ b/graphene_django/templates/graphene/graphiql.html
@@ -45,6 +45,7 @@ add "&raw" to the end of the URL within a browser.
     {% if subscription_path %}
       subscriptionPath: "{{subscription_path}}",
     {% endif %}
+      graphiqlHeaderEditorEnabled: {{ graphiql_header_editor_enabled|yesno:"true,false" }},
     };
   </script>
   <script src="{% static 'graphene_django/graphiql.js' %}"></script>
diff --git a/graphene_django/views.py b/graphene_django/views.py
index 59084e8..5ee0297 100644
--- a/graphene_django/views.py
+++ b/graphene_django/views.py
@@ -167,6 +167,8 @@ class GraphQLView(View):
                     subscriptions_transport_ws_sri=self.subscriptions_transport_ws_sri,
                     # The SUBSCRIPTION_PATH setting.
                     subscription_path=self.subscription_path,
+                    # GraphiQL headers tab,
+                    graphiql_header_editor_enabled=graphene_settings.GRAPHIQL_HEADER_EDITOR_ENABLED,
                 )
 
             if self.batch: