feat: add defaultHeaders prop

graphql · Nov 10, 2022 · 2ba2f62 · 2ba2f62
1 parent 3659448
commit 2ba2f62
Show file tree

Hide file tree

Showing 7 changed files with 57 additions and 3 deletions.
diff --git a/.changeset/sweet-papayas-run.md b/.changeset/sweet-papayas-run.md
@@ -0,0 +1,6 @@
+---
+'graphiql': patch
+'@graphiql/react': patch
+---
+
+feat: add `defaultHeaders` prop
diff --git a/packages/graphiql-react/src/editor/context.tsx b/packages/graphiql-react/src/editor/context.tsx
@@ -234,6 +234,11 @@ export type EditorContextProviderProps = {
    * typing in the editor.
    */
   variables?: string;
+
+  /**
+   * Headers to be set when opening a new tab
+   */
+  defaultHeaders?: string;
 };
 
 export function EditorContextProvider(props: EditorContextProviderProps) {
@@ -275,6 +280,7 @@ export function EditorContextProvider(props: EditorContextProviderProps) {
       headers,
       initialTabs: props.initialTabs,
       defaultQuery: props.defaultQuery || DEFAULT_QUERY,
+      defaultHeaders: props.defaultHeaders,
       storage,
     });
     storeTabs(tabState);
@@ -285,7 +291,7 @@ export function EditorContextProvider(props: EditorContextProviderProps) {
         (tabState.activeTabIndex === 0 ? tabState.tabs[0].query : null) ??
         '',
       variables: variables ?? '',
-      headers: headers ?? '',
+      headers: headers ?? props.defaultHeaders ?? '',
       response,
       tabState,
     };
@@ -312,7 +318,10 @@ export function EditorContextProvider(props: EditorContextProviderProps) {
       // Make sure the current tab stores the latest values
       const updatedValues = synchronizeActiveTabValues(current);
       const updated = {
-        tabs: [...updatedValues.tabs, createTab()],
+        tabs: [
+          ...updatedValues.tabs,
+          createTab({ headers: props.defaultHeaders }),
+        ],
         activeTabIndex: updatedValues.tabs.length,
       };
       storeTabs(updated);

diff --git a/packages/graphiql-react/src/editor/tabs.ts b/packages/graphiql-react/src/editor/tabs.ts
@@ -66,13 +66,15 @@ export type TabsState = {
 
 export function getDefaultTabState({
   defaultQuery,
+  defaultHeaders,
   headers,
   initialTabs,
   query,
   variables,
   storage,
 }: {
   defaultQuery: string;
+  defaultHeaders?: string;
   headers: string | null;
   initialTabs?: TabDefinition[];
   query: string | null;
@@ -126,7 +128,13 @@ export function getDefaultTabState({
     return {
       activeTabIndex: 0,
       tabs: (
-        initialTabs || [{ query: query ?? defaultQuery, variables, headers }]
+        initialTabs || [
+          {
+            query: query ?? defaultQuery,
+            variables,
+            headers: headers ?? defaultHeaders,
+          },
+        ]
       ).map(createTab),
     };
   }

diff --git a/packages/graphiql-react/src/provider.tsx b/packages/graphiql-react/src/provider.tsx
@@ -24,6 +24,7 @@ export function GraphiQLProvider({
   children,
   dangerouslyAssumeSchemaIsValid,
   defaultQuery,
+  defaultHeaders,
   externalFragments,
   fetcher,
   getDefaultFieldNames,
@@ -53,6 +54,7 @@ export function GraphiQLProvider({
       <HistoryContextProvider maxHistoryLength={maxHistoryLength}>
         <EditorContextProvider
           defaultQuery={defaultQuery}
+          defaultHeaders={defaultHeaders}
           externalFragments={externalFragments}
           headers={headers}
           initialTabs={initialTabs}

diff --git a/packages/graphiql/cypress/integration/headers.spec.ts b/packages/graphiql/cypress/integration/headers.spec.ts
@@ -0,0 +1,26 @@
+const DEFAULT_HEADERS = '{"foo":2}';
+
+describe('Headers', () => {
+  describe('`defaultHeaders`', () => {
+    it('should have default headers while open new tabs', () => {
+      cy.visit(`/?query={test}&defaultHeaders=${DEFAULT_HEADERS}`);
+      cy.assertHasValues({ query: '{test}', headersString: DEFAULT_HEADERS });
+      cy.get('.graphiql-add-tab-wrapper').click();
+      cy.assertHasValues({ query: '', headersString: DEFAULT_HEADERS });
+      cy.get('.graphiql-tab-add').click();
+      cy.assertHasValues({ query: '', headersString: DEFAULT_HEADERS });
+    });
+
+    it('in case `headers` and `defaultHeaders` are set, `headers` should be on 1st tab and `defaultHeaders` for other opened tabs', () => {
+      const HEADERS = '{"bar":true}';
+      cy.visit(
+        `/?query={test}&defaultHeaders=${DEFAULT_HEADERS}&headers=${HEADERS}`,
+      );
+      cy.assertHasValues({ query: '{test}', headersString: HEADERS });
+      cy.get('.graphiql-add-tab-wrapper').click();
+      cy.assertHasValues({ query: '', headersString: DEFAULT_HEADERS });
+      cy.get('.graphiql-tab-add').click();
+      cy.assertHasValues({ query: '', headersString: DEFAULT_HEADERS });
+    });
+  });
+});
diff --git a/packages/graphiql/resources/renderExample.js b/packages/graphiql/resources/renderExample.js
@@ -97,6 +97,7 @@ ReactDOM.render(
     query: parameters.query,
     variables: parameters.variables,
     headers: parameters.headers,
+    defaultHeaders: parameters.defaultHeaders,
     onEditQuery: onEditQuery,
     onEditVariables: onEditVariables,
     onEditHeaders: onEditHeaders,

diff --git a/packages/graphiql/src/components/GraphiQL.tsx b/packages/graphiql/src/components/GraphiQL.tsx
@@ -117,6 +117,7 @@ export function GraphiQL({
   validationRules,
   variables,
   visiblePlugin,
+  defaultHeaders,
   ...props
 }: GraphiQLProps) {
   // Ensure props are correct
@@ -131,6 +132,7 @@ export function GraphiQL({
       getDefaultFieldNames={getDefaultFieldNames}
       dangerouslyAssumeSchemaIsValid={dangerouslyAssumeSchemaIsValid}
       defaultQuery={defaultQuery}
+      defaultHeaders={defaultHeaders}
       externalFragments={externalFragments}
       fetcher={fetcher}
       headers={headers}