From de62d67a68ea8a530aef0a42c3b2cd1d883b3bdb Mon Sep 17 00:00:00 2001
From: Okan Cetin <okancetin44@gmail.com>
Date: Thu, 15 Aug 2024 18:17:06 +0300
Subject: [PATCH] fix: use the default query on adding a new tab (#3441)

* Use default query on adding new tab

* Fix eslint issue

* First try to use `query` and `headers` props

* add changeset

* upd

fix lint

this should fix cypress

fix

* Update .changeset/brown-tigers-nail.md

---------

Co-authored-by: Rikki Schulte <rikki.schulte@gmail.com>
Co-authored-by: Dimitri POSTOLOV <dmytropostolov@gmail.com>
---
 .changeset/brown-tigers-nail.md                | 16 ++++++++++++++++
 packages/graphiql-react/src/editor/context.tsx | 11 +++++++++--
 packages/graphiql/cypress/e2e/headers.cy.ts    |  6 ++++--
 packages/graphiql/cypress/e2e/tabs.cy.ts       |  2 +-
 packages/graphiql/resources/renderExample.js   |  1 +
 5 files changed, 31 insertions(+), 5 deletions(-)
 create mode 100644 .changeset/brown-tigers-nail.md

diff --git a/.changeset/brown-tigers-nail.md b/.changeset/brown-tigers-nail.md
new file mode 100644
index 00000000000..11760a5b607
--- /dev/null
+++ b/.changeset/brown-tigers-nail.md
@@ -0,0 +1,16 @@
+---
+"@graphiql/react": patch
+"graphiql": patch
+---
+
+fix: set query editor to `defaultQuery` while adding a new tab or GraphiQL's default query
+
+```graphql
+# Welcome to GraphiQL
+#
+# GraphiQL is an in-browser tool for writing, validating, and
+# testing GraphQL queries.
+
+...
+```
+
diff --git a/packages/graphiql-react/src/editor/context.tsx b/packages/graphiql-react/src/editor/context.tsx
index b592dd680da..339f84cf03b 100644
--- a/packages/graphiql-react/src/editor/context.tsx
+++ b/packages/graphiql-react/src/editor/context.tsx
@@ -360,7 +360,7 @@ export function EditorContextProvider(props: EditorContextProviderProps) {
     headerEditor,
     responseEditor,
   });
-  const { onTabChange, defaultHeaders, children } = props;
+  const { onTabChange, defaultHeaders, defaultQuery, children } = props;
   const setEditorValues = useSetEditorValues({
     queryEditor,
     variableEditor,
@@ -374,7 +374,13 @@ export function EditorContextProvider(props: EditorContextProviderProps) {
       // Make sure the current tab stores the latest values
       const updatedValues = synchronizeActiveTabValues(current);
       const updated = {
-        tabs: [...updatedValues.tabs, createTab({ headers: defaultHeaders })],
+        tabs: [
+          ...updatedValues.tabs,
+          createTab({
+            headers: defaultHeaders,
+            query: defaultQuery ?? DEFAULT_QUERY,
+          }),
+        ],
         activeTabIndex: updatedValues.tabs.length,
       };
       storeTabs(updated);
@@ -384,6 +390,7 @@ export function EditorContextProvider(props: EditorContextProviderProps) {
     });
   }, [
     defaultHeaders,
+    defaultQuery,
     onTabChange,
     setEditorValues,
     storeTabs,
diff --git a/packages/graphiql/cypress/e2e/headers.cy.ts b/packages/graphiql/cypress/e2e/headers.cy.ts
index da453b052d3..7e4df95b56c 100644
--- a/packages/graphiql/cypress/e2e/headers.cy.ts
+++ b/packages/graphiql/cypress/e2e/headers.cy.ts
@@ -3,7 +3,9 @@ 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.visit(
+        `/?query={test}&defaultHeaders=${DEFAULT_HEADERS}&defaultQuery=`,
+      );
       cy.assertHasValues({ query: '{test}', headersString: DEFAULT_HEADERS });
       cy.get('.graphiql-tab-add').click();
       cy.assertHasValues({ query: '', headersString: DEFAULT_HEADERS });
@@ -14,7 +16,7 @@ describe('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}`,
+        `/?query={test}&defaultHeaders=${DEFAULT_HEADERS}&headers=${HEADERS}&defaultQuery=`,
       );
       cy.assertHasValues({ query: '{test}', headersString: HEADERS });
       cy.get('.graphiql-tab-add').click();
diff --git a/packages/graphiql/cypress/e2e/tabs.cy.ts b/packages/graphiql/cypress/e2e/tabs.cy.ts
index c256c6c8b84..c3dac4a5705 100644
--- a/packages/graphiql/cypress/e2e/tabs.cy.ts
+++ b/packages/graphiql/cypress/e2e/tabs.cy.ts
@@ -1,6 +1,6 @@
 describe('Tabs', () => {
   it('Should store editor contents when switching between tabs', () => {
-    cy.visit('/?query=');
+    cy.visit('/?defaultQuery=&query=');
 
     // Assert that tab visible when there's only one session
     cy.get('.graphiql-tab-button').eq(0).should('exist');
diff --git a/packages/graphiql/resources/renderExample.js b/packages/graphiql/resources/renderExample.js
index 82796f9f591..bb1ff63b11d 100644
--- a/packages/graphiql/resources/renderExample.js
+++ b/packages/graphiql/resources/renderExample.js
@@ -95,5 +95,6 @@ root.render(
       parameters.confirmCloseTab === 'true' ? confirmCloseTab : undefined,
     onTabChange,
     forcedTheme: parameters.forcedTheme,
+    defaultQuery: parameters.defaultQuery,
   }),
 );