Add headers support to GraphiQL

* add GRAPHIQL_HEADER_EDITOR_ENABLED setting with False default
* use GRAPHIQL_HEADER_EDITOR_ENABLED to set headerEditorEnabled GraphiQL option
* update graphQLFetcher and httpClient in static/graphiql.js to support custom query/mutation headers

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,
+    # Set to True to enable GraphiQL headers editor tab
+    # This sets headerEditorEnabled GraphiQL option, for details go to
+    # https://github.com/graphql/graphiql/tree/main/packages/graphiql#options
+    "GRAPHIQL_HEADER_EDITOR_ENABLED": False,
 }
 
 if settings.DEBUG:

graphene_django/static/graphene_django/graphiql.js

@@ -61,17 +61,29 @@
   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 = { headers: {} }) {
+    let headers = opts.headers;
+    // Convert headers to an object.
+    if (typeof headers === 'string') {
+      headers = JSON.parse(opts.headers);
+    }
     if (csrftoken) {
-      headers["X-CSRFToken"] = csrftoken;
+      Object.assign(
+          {
+            'X-CSRFToken': csrftoken
+          },
+          headers,
+      )
     }
     return fetch(fetchURL, {
       method: "post",
-      headers: headers,
+      headers: Object.assign(
+          {
+            'Accept': 'application/json',
+            'Content-Type': 'application/json'
+          },
+          headers,
+      ),
       body: JSON.stringify(graphQLParams),
       credentials: "include",
     })
@@ -108,7 +120,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 = { headers: {} }) {
     var operationType = getOperationType(graphQLParams);
 
     // If we're about to execute a new operation, and we have an active subscription,
@@ -126,7 +138,7 @@
         },
       };
     } else {
-      return httpClient(graphQLParams);
+      return httpClient(graphQLParams, opts);
     }
   }
 
@@ -173,6 +185,7 @@
     onEditQuery: onEditQuery,
     onEditVariables: onEditVariables,
     onEditOperationName: onEditOperationName,
+    headerEditorEnabled: GRAPHENE_SETTINGS.graphiqlHeaderEditorEnabled || false,
     query: parameters.query,
   };
   if (parameters.variables) {