Add headers support to GraphiQL

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,
+ }

graphene_django/settings.py

@@ -41,6 +41,10 @@
  "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:

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) {

graphene_django/templates/graphene/graphiql.html

@@ -45,6 +45,7 @@
  {% if subscription_path %}
  subscriptionPath: "{{subscription_path}}",
  {% endif %}
+ graphiqlHeaderEditorEnabled: {{ graphiql_header_editor_enabled|yesno:"true,false" }},
  };
  </script>
  <script src="{% static 'graphene_django/graphiql.js' %}"></script>

graphene_django/views.py

@@ -167,6 +167,8 @@ def dispatch(self, request, *args, **kwargs):
  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: