support default graphiql header state (#796)

Author: simonista

README.md

@@ -136,6 +136,12 @@ The `graphqlHTTP` function accepts the following options:
   - **`headerEditorEnabled`**: An optional boolean which enables the header editor when `true`.
     Defaults to `false`.
 
+  - **`shouldPersistHeaders`**: An optional boolean which enables headers to be saved to local storage when `true`.
+    Defaults to `false`.
+
+  - **`headers`**: An optional string of initial state for the header editor. Only makes sense if headerEditorEnabled is `true`.
+    Defaults to empty.
+
   - **`subscriptionEndpoint`**: An optional GraphQL string contains the WebSocket server url for subscription.
 
   - **`websocketClient`**: An optional GraphQL string for websocket client used for subscription, `v0`: subscriptions-transport-ws, `v1`: graphql-ws. Defaults to `v0` if not provided

src/renderGraphiQL.ts

@@ -28,6 +28,13 @@ export interface GraphiQLOptions {
    */
   shouldPersistHeaders?: boolean;
 
+  /**
+   * An optional string of initial state for the header editor. Only makes
+   * sense if headerEditorEnabled is true.
+   * Defaults to empty.
+   */
+  headers?: string;
+
   /**
    * A websocket endpoint for subscription
    */
@@ -71,6 +78,7 @@ export function renderGraphiQL(
   const defaultQuery = options?.defaultQuery;
   const headerEditorEnabled = options?.headerEditorEnabled;
   const shouldPersistHeaders = options?.shouldPersistHeaders;
+  const headers = options?.headers;
   const subscriptionEndpoint = options?.subscriptionEndpoint;
   const websocketClient = options?.websocketClient ?? 'v0';
 
@@ -270,7 +278,8 @@ add "&raw" to the end of the URL within a browser.
         operationName: ${safeSerialize(operationName)},
         defaultQuery: ${safeSerialize(defaultQuery)},
         headerEditorEnabled: ${safeSerialize(headerEditorEnabled)},
-        shouldPersistHeaders: ${safeSerialize(shouldPersistHeaders)}
+        shouldPersistHeaders: ${safeSerialize(shouldPersistHeaders)},
+        headers: ${safeSerialize(headers)}
       }),
       document.getElementById('graphiql')
     );