rename the initialTabs prop to defaultTabs

.changeset/loud-beans-mate.md

@@ -0,0 +1,7 @@
+---
+'graphiql': minor
+'@graphiql/react': minor
+---
+
+Deprecate the `initialTabs` prop and add a `defaultTabs` props that supersedes
+it

packages/graphiql-react/src/editor/__tests__/tabs.spec.ts

@@ -108,7 +108,7 @@ describe('getDefaultTabState', () => {
       getDefaultTabState({
         defaultQuery: '# Default',
         headers: null,
-        initialTabs: [
+        defaultTabs: [
           {
             headers: null,
             query: 'query Person { person { name } }',

packages/graphiql-react/src/editor/context.tsx

@@ -170,20 +170,25 @@ export type EditorContextProviderProps = {
    */
   headers?: string;
   /**
-   * This prop can be used to defined the initial set of tabs with their queries,
-   * variables and headers.
+   * @deprecated Use `defaultTabs` instead.
+   */
+  initialTabs?: TabDefinition[];
+  /**
+   * This prop can be used to define the default set of tabs, with their
+   * queries, variables, and headers. It will be used as default only if
+   * there is no tab state persisted in storage.
    *
    * @example
    * ```tsx
    * <GraphiQL
-   *   initialTabs={[
+   *   defaultTabs={[
    *     { query: 'query myExampleQuery {}' },
    *     { query: '{ id }' }
    *   ]}
    * />
    *```
    */
-  initialTabs?: TabDefinition[];
+  defaultTabs?: TabDefinition[];
   /**
    * Invoked when the operation name changes. Possible triggers are:
    * - Editing the contents of the query editor
@@ -278,7 +283,7 @@ export function EditorContextProvider(props: EditorContextProviderProps) {
       query,
       variables,
       headers,
-      initialTabs: props.initialTabs,
+      defaultTabs: props.defaultTabs || props.initialTabs,
       defaultQuery: props.defaultQuery || DEFAULT_QUERY,
       defaultHeaders: props.defaultHeaders,
       storage,

packages/graphiql-react/src/editor/tabs.ts

@@ -68,15 +68,15 @@ export function getDefaultTabState({
   defaultQuery,
   defaultHeaders,
   headers,
-  initialTabs,
+  defaultTabs,
   query,
   variables,
   storage,
 }: {
   defaultQuery: string;
   defaultHeaders?: string;
   headers: string | null;
-  initialTabs?: TabDefinition[];
+  defaultTabs?: TabDefinition[];
   query: string | null;
   variables: string | null;
   storage: StorageAPI | null;
@@ -128,7 +128,7 @@ export function getDefaultTabState({
     return {
       activeTabIndex: 0,
       tabs: (
-        initialTabs || [
+        defaultTabs || [
           {
             query: query ?? defaultQuery,
             variables,

packages/graphiql-react/src/provider.tsx

@@ -25,6 +25,7 @@ export function GraphiQLProvider({
   dangerouslyAssumeSchemaIsValid,
   defaultQuery,
   defaultHeaders,
+  defaultTabs,
   externalFragments,
   fetcher,
   getDefaultFieldNames,
@@ -55,6 +56,7 @@ export function GraphiQLProvider({
         <EditorContextProvider
           defaultQuery={defaultQuery}
           defaultHeaders={defaultHeaders}
+          defaultTabs={defaultTabs}
           externalFragments={externalFragments}
           headers={headers}
           initialTabs={initialTabs}

packages/graphiql/src/components/GraphiQL.tsx

@@ -94,6 +94,7 @@ export type GraphiQLProps = Omit<GraphiQLProviderProps, 'children'> &
 export function GraphiQL({
   dangerouslyAssumeSchemaIsValid,
   defaultQuery,
+  defaultTabs,
   externalFragments,
   fetcher,
   getDefaultFieldNames,
@@ -133,6 +134,7 @@ export function GraphiQL({
       dangerouslyAssumeSchemaIsValid={dangerouslyAssumeSchemaIsValid}
       defaultQuery={defaultQuery}
       defaultHeaders={defaultHeaders}
+      defaultTabs={defaultTabs}
       externalFragments={externalFragments}
       fetcher={fetcher}
       headers={headers}

packages/graphiql/src/components/__tests__/GraphiQL.spec.tsx

@@ -482,11 +482,11 @@ describe('GraphiQL', () => {
       });
     });
 
-    it('shows initial tabs', async () => {
+    it('shows default tabs', async () => {
       const { container } = render(
         <GraphiQL
           fetcher={noOpFetcher}
-          initialTabs={[
+          defaultTabs={[
             {
               query: 'query Person { person { name } }',
             },