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]>
graphql · Aug 15, 2024 · 959ed21 · 959ed21
1 parent 40bbd61
commit 959ed21
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 5 deletions.
diff --git a/.changeset/brown-tigers-nail.md 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
@@ -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
@@ -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
@@ -1,6 +1,6 @@
 describe('Tabs', () => {
   it('Should store editor contents when switching between tabs', () => {
-    cy.visit('/?query=');
+    cy.visit('/?defaultQuery=&query=');
 
     // Assert that no tab visible when there's only one session
     cy.get('#graphiql-session-tab-0').should('not.exist');

diff --git a/packages/graphiql/resources/renderExample.js b/packages/graphiql/resources/renderExample.js
@@ -94,5 +94,6 @@ root.render(
       parameters.confirmCloseTab === 'true' ? confirmCloseTab : undefined,
     onTabChange,
     forcedTheme: parameters.forcedTheme,
+    defaultQuery: parameters.defaultQuery,
   }),
 );