Add support for HTTP headers

src/App.css

@@ -25,6 +25,9 @@ ul.tree-view,
   font-size: 14px !important;
 }
 
+input {
+  height: 2em !important;
+}
 pre {
   overflow-x: auto;
 }

src/components/GraphQlUrlChooser.module.css

@@ -13,6 +13,5 @@
   margin-right: 5px;
 }
 .urlInput {
-  height: 2em !important;
   flex-grow: 1;
 }

src/components/GraphQlUrlChooser.tsx

@@ -1,36 +1,51 @@
 import styles from './GraphQlUrlChooser.module.css';
 import { GraphQlWrapper } from './GraphQlWrapper';
-import React, {
-  ChangeEvent,
-  FormEvent,
-  useCallback,
-  useEffect,
-  useState,
-} from 'react';
+import React, { ChangeEvent, FormEvent, useCallback, useState } from 'react';
 import { StringParam, useQueryParam } from 'use-query-params';
 import { githubUrl } from './about';
 import { WhatIsThis } from './WhatIsThis';
+import { HeaderEditor } from './HeaderEditor';
+import {
+  getHeadersStorageKey,
+  GraphQlHeader,
+  setLocalStorageData,
+  useHeadersLocalStorage,
+} from '../hooks/localStorageCache';
 
 export function GraphQlUrlChooser() {
   const [url, setQueryUrl] = useQueryParam('url', StringParam);
   const [, setQueryPath] = useQueryParam('path', StringParam);
-  const [tempUrl, setTempUrl] = useState(url ?? 'https://');
-  useEffect(() => {
-    if (url) {
-      setTempUrl(url);
-    }
-  }, [url, setTempUrl]);
+  const [tempChanges, setTempChanges] = useState<
+    { url: string; headers?: GraphQlHeader[] } | undefined
+  >(undefined);
+
+  const tempUrl = tempChanges?.url ?? url ?? '';
+
+  const [storedHeaders] = useHeadersLocalStorage(tempUrl || undefined);
+  const tempHeaders = tempChanges?.headers ?? storedHeaders;
 
   const onChangeUrl = useCallback(
     (event: ChangeEvent<HTMLInputElement>) =>
-      setTempUrl(event.currentTarget.value),
-    [],
+      setTempChanges({
+        url: event.currentTarget.value,
+        headers: tempHeaders,
+      }),
+    [tempHeaders],
+  );
+  const onChangeHeaders = useCallback(
+    (headers: GraphQlHeader[]) => {
+      setTempChanges({
+        url: tempUrl,
+        headers,
+      });
+    },
+    [tempUrl],
   );
 
   const goHome = useCallback(
     (event: React.MouseEvent<HTMLButtonElement>) => {
       event.preventDefault();
-      setTempUrl('');
+      setTempChanges(undefined);
       setQueryUrl(undefined);
       setQueryPath(undefined);
     },
@@ -40,9 +55,16 @@ export function GraphQlUrlChooser() {
   const loadUrl = useCallback(
     (event: FormEvent) => {
       event.preventDefault();
-      setQueryUrl(tempUrl, 'replace');
+      if (tempChanges) {
+        setQueryUrl(tempChanges.url, 'replace');
+        setLocalStorageData(
+          getHeadersStorageKey(tempChanges.url),
+          tempChanges.headers,
+        );
+        setTempChanges(undefined);
+      }
     },
-    [tempUrl, setQueryUrl],
+    [tempChanges, setQueryUrl],
   );
 
   const goToGithub = useCallback(() => {
@@ -59,21 +81,26 @@ export function GraphQlUrlChooser() {
           </div>
         </div>
         <main className="window-body">
-          <form onSubmit={loadUrl} className={styles.urlConfig}>
-            <label htmlFor="url">Endpoint URL:</label>
-            <div className={styles.locationBox}>
-              <input
-                id="url"
-                type="text"
-                className={styles.urlInput}
-                placeholder="GraphQL endpoint"
-                value={tempUrl}
-                onChange={onChangeUrl}
-              />
+          <form onSubmit={loadUrl}>
+            <div className={styles.urlConfig}>
+              <label htmlFor="url">Endpoint URL:</label>
+              <div className={styles.locationBox}>
+                <input
+                  id="url"
+                  type="text"
+                  className={styles.urlInput}
+                  placeholder="GraphQL endpoint"
+                  value={tempUrl}
+                  onChange={onChangeUrl}
+                />
+              </div>
+              <button type="submit" disabled={!tempChanges}>
+                Load
+              </button>
             </div>
-            <button type="submit" disabled={!tempUrl || tempUrl === url}>
-              Load
-            </button>
+            {tempUrl && (
+              <HeaderEditor headers={tempHeaders} onChange={onChangeHeaders} />
+            )}
           </form>
         </main>
       </div>

src/components/GraphQlWrapper.tsx

@@ -1,10 +1,13 @@
 import React, { useMemo } from 'react';
-import { ClientContext, GraphQLClient, useQuery } from 'graphql-hooks';
+import { ClientContext, GraphQLClient, Headers, useQuery } from 'graphql-hooks';
 
 import { getIntrospectionQuery, IntrospectionQuery } from 'graphql';
 import { IntrospectedGraphQl } from './IntrospectedGraphQl';
 import { GraphQlError } from './GraphQlError';
-import { LocalStorageCache } from '../hooks/localStorageCache';
+import {
+  LocalStorageCache,
+  useHeadersLocalStorage,
+} from '../hooks/localStorageCache';
 
 // Some graphql servers fail if you try to request the 'locations'
 // field on directives (we're not using directives anyway)
@@ -13,13 +16,27 @@ const introspectionQuery = getIntrospectionQuery({
 }).replace(`locations`, '');
 
 export function GraphQlWrapper({ url }: { url: string }) {
+  const [rawHeaders] = useHeadersLocalStorage(url);
+  const headers = useMemo(() => {
+    if (!rawHeaders) {
+      return undefined;
+    }
+    const h: Headers = {};
+    for (const { name, value } of rawHeaders) {
+      if (name && value) {
+        h[name] = value;
+      }
+    }
+    return h;
+  }, [rawHeaders]);
   const client = useMemo(
     () =>
       new GraphQLClient({
         url,
+        headers,
         cache: new LocalStorageCache(url, introspectionQuery),
       }),
-    [url],
+    [headers, url],
   );
 
   const { error, loading, data, refetch } = useQuery<IntrospectionQuery>(

src/components/HeaderEditor.tsx

@@ -0,0 +1,100 @@
+import React, { ChangeEvent, useCallback, useMemo } from 'react';
+import { GraphQlHeader } from '../hooks/localStorageCache';
+
+export function HeaderEditor({
+  disabled = false,
+  headers = [],
+  onChange,
+}: {
+  disabled?: boolean;
+  headers?: GraphQlHeader[];
+  onChange: (headers: GraphQlHeader[]) => void;
+}) {
+  const currentHeaders = useMemo(
+    () => [
+      ...headers.filter(({ name, value }) => name || value),
+      { name: '', value: '' },
+    ],
+    [headers],
+  );
+
+  const onChangeRow = useCallback(
+    (index: number, name: string, value: string) => {
+      const newHeaders = [...currentHeaders];
+      newHeaders[index] = { name, value };
+      onChange(newHeaders);
+    },
+    [currentHeaders, onChange],
+  );
+
+  return (
+    <>
+      <div>HTTP Headers (stored in browser local storage)</div>
+      <table>
+        <tbody>
+          {currentHeaders.map(({ name, value }, index) => (
+            <EditHeaderRow
+              key={index}
+              index={index}
+              name={name}
+              value={value}
+              disabled={disabled}
+              onChange={onChangeRow}
+            />
+          ))}
+        </tbody>
+      </table>
+    </>
+  );
+}
+
+function EditHeaderRow({
+  index,
+  name,
+  value,
+  disabled,
+  onChange,
+}: {
+  index: number;
+  disabled: boolean;
+  name: string;
+  value: string;
+  onChange: (index: number, name: string, value: string) => void;
+}) {
+  const changeHeaderName = useCallback(
+    (event: ChangeEvent<HTMLInputElement>) =>
+      onChange(index, event.currentTarget.value, value),
+    [index, onChange, value],
+  );
+  const changeHeaderValue = useCallback(
+    (event: ChangeEvent<HTMLInputElement>) =>
+      onChange(index, name, event.currentTarget.value),
+
+    [index, name, onChange],
+  );
+
+  return (
+    <tr key={index}>
+      <td>
+        <input
+          type="text"
+          value={name}
+          data-index={index}
+          placeholder="Header name"
+          onChange={changeHeaderName}
+          disabled={disabled}
+        />
+      </td>
+      <td>
+        <input
+          type="text"
+          value={value}
+          data-index={index}
+          placeholder="value"
+          onChange={changeHeaderValue}
+          disabled={disabled}
+        />
+      </td>
+    </tr>
+  );
+}