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 <[email protected]>
Co-authored-by: Dimitri POSTOLOV <[email protected]>

Author: 3 people

.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.
+
+...
+```
+

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,

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();

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');

packages/graphiql/resources/renderExample.js

@@ -95,5 +95,6 @@ root.render(
       parameters.confirmCloseTab === 'true' ? confirmCloseTab : undefined,
     onTabChange,
     forcedTheme: parameters.forcedTheme,
+    defaultQuery: parameters.defaultQuery,
   }),
 );