feat: Add Headers Editor to GraphiQL (#1543)

Co-authored-by: Rikki Schulte <[email protected]>

Author: connorshea

packages/graphiql/README.md

@@ -167,6 +167,8 @@ GraphiQL supports customization in UI and behavior by accepting React props and
 
 - `variables`: an optional GraphQL string to use as the initial displayed query variables, if `undefined` is provided, the stored variables will be used.
 
+- `headers`: an optional GraphQL string to use as the initial displayed request headers, if `undefined` is provided, the stored headers will be used.
+
 - `operationName`: an optional name of which GraphQL operation should be executed.
 
 - `response`: an optional JSON string to use as the initial displayed response. If not provided, no response will be initially shown. You might provide this if illustrating the result of the initial query.
@@ -175,12 +177,16 @@ GraphiQL supports customization in UI and behavior by accepting React props and
 
 - `defaultQuery`: an optional GraphQL string to use when no query is provided and no stored query exists from a previous session. If `undefined` is provided, GraphiQL will use its own default query.
 
-- `defaultVariableEditorOpen`: an optional boolean that sets whether or not to show the variables pane on startup. If not defined, it will be based off whether or not variables are present.
+- `defaultVariableEditorOpen`: an optional boolean that sets whether or not to show the variables pane on startup. If not defined, it will be based off whether or not variables are present. (**deprecated** in favor of `defaultSecondaryEditorOpen`)
+
+- `defaultSecondaryEditorOpen`: an optional boolean that sets whether or not to show the variables/headers pane on startup. If not defined, it will be based off whether or not variables and/or headers are present.
 
 - `onEditQuery`: an optional function which will be called when the Query editor changes. The argument to the function will be the query string.
 
 - `onEditVariables`: an optional function which will be called when the Query variable editor changes. The argument to the function will be the variables string.
 
+- `onEditHeaders`: an optional function which will be called when the request headers editor changes. The argument to the function will be the headers string.
+
 - `onEditOperationName`: an optional function which will be called when the operation name to be executed changes.
 
 - `onToggleDocs`: an optional function which will be called when the docs will be toggled. The argument to the function will be a boolean whether the docs are now open or closed.
@@ -193,6 +199,8 @@ GraphiQL supports customization in UI and behavior by accepting React props and
 
 - `docExplorerOpen`: an optional boolean which when `true` will ensure the `DocExplorer` is open by default when the user first renders the component. If the user has toggled the doc explorer on/off following this, however, the persisted UI state will override this default flag.
 
+- `headerEditorEnabled`: an optional boolean which enables the header editor when `true`. Defaults to `false`.
+
 ### Children (dropped as of 1.0.0-rc.2)
 
 - `<GraphiQL.Logo>`: Replace the GraphiQL logo with your own.
@@ -236,6 +244,7 @@ class CustomGraphiQL extends React.Component {
       // GraphQL artifacts
       query: '',
       variables: '',
+      headers: '',
       response: '',
 
       // GraphQL Schema
@@ -252,6 +261,7 @@ class CustomGraphiQL extends React.Component {
       // Custom Event Handlers
       onEditQuery: null,
       onEditVariables: null,
+      onEditHeaders: null,
       onEditOperationName: null,
 
       // GraphiQL automatically fills in leaf nodes when the query

packages/graphiql/resources/renderExample.js

@@ -36,6 +36,20 @@ if (parameters.variables) {
   }
 }
 
+// If headers was provided, try to format it.
+if (parameters.headers) {
+  try {
+    parameters.headers = JSON.stringify(
+      JSON.parse(parameters.headers),
+      null,
+      2,
+    );
+  } catch (e) {
+    // Do nothing, we want to display the invalid JSON as a string, rather
+    // than present an error.
+  }
+}
+
 // When the query and variables string is edited, update the URL bar so
 // that it can be easily shared.
 function onEditQuery(newQuery) {
@@ -48,6 +62,11 @@ function onEditVariables(newVariables) {
   updateURL();
 }
 
+function onEditHeaders(newHeaders) {
+  parameters.headers = newHeaders;
+  updateURL();
+}
+
 function onEditOperationName(newOperationName) {
   parameters.operationName = newOperationName;
   updateURL();
@@ -72,20 +91,30 @@ function updateURL() {
 // Defines a GraphQL fetcher using the fetch API. You're not required to
 // use fetch, and could instead implement graphQLFetcher however you like,
 // as long as it returns a Promise or Observable.
-function graphQLFetcher(graphQLParams) {
+function graphQLFetcher(graphQLParams, opts = { headers: {} }) {
   // When working locally, the example expects a GraphQL server at the path /graphql.
   // In a PR preview, it connects to the Star Wars API externally.
   // Change this to point wherever you host your GraphQL server.
   const isDev = window.location.hostname.match(/localhost$/);
   const api = isDev
     ? '/graphql'
     : 'https://swapi-graphql.netlify.app/.netlify/functions/index';
+
+  let headers = opts.headers;
+  // Convert headers to an object.
+  if (typeof headers === 'string') {
+    headers = JSON.parse(opts.headers);
+  }
+
   return fetch(api, {
     method: 'post',
-    headers: {
-      Accept: 'application/json',
-      'Content-Type': 'application/json',
-    },
+    headers: Object.assign(
+      {
+        Accept: 'application/json',
+        'Content-Type': 'application/json',
+      },
+      headers,
+    ),
     body: JSON.stringify(graphQLParams),
     credentials: 'omit',
   })
@@ -110,11 +139,14 @@ ReactDOM.render(
     fetcher: graphQLFetcher,
     query: parameters.query,
     variables: parameters.variables,
+    headers: parameters.headers,
     operationName: parameters.operationName,
     onEditQuery: onEditQuery,
     onEditVariables: onEditVariables,
+    onEditHeaders: onEditHeaders,
     defaultVariableEditorOpen: true,
     onEditOperationName: onEditOperationName,
+    headerEditorEnabled: true,
   }),
   document.getElementById('graphiql'),
 );