graphiql 5: Remove query, variables, headers and response props from <GraphiQL />

.changeset/nasty-cows-train.md

@@ -0,0 +1,9 @@
+---
+'@graphiql/react': minor
+'graphiql': major
+---
+
+- Remove `query`, `variables`, `headers`, and `response` props from `<GraphiQL />` and `<GraphiQLProvider />`
+- Add `initialQuery`, `initialVariables` and `initialHeaders` props
+- Fix `defaultQuery`, when is set will only be used for the first tab. When opening more tabs, the query editor will start out empty
+- remove `useSynchronizeValue` hook

packages/graphiql-react/src/components/header-editor.tsx

@@ -33,7 +33,6 @@ export const HeaderEditor: FC<HeaderEditorProps> = ({ onEdit, ...props }) => {
   );
   useEffect(() => {
     const model = getOrCreateModel({ uri: HEADER_URI, value: initialHeaders });
-    // Build the editor
     const editor = createEditor(ref, { model });
     setEditor({ headerEditor: editor });
     const disposables = [

packages/graphiql-react/src/components/provider.tsx

@@ -1,11 +1,5 @@
 /* eslint sort-keys: "error" */
-import type {
-  ComponentPropsWithoutRef,
-  FC,
-  ReactElement,
-  ReactNode,
-  RefObject,
-} from 'react';
+import type { ComponentPropsWithoutRef, FC, ReactNode, RefObject } from 'react';
 import { createContext, useContext, useRef, useEffect } from 'react';
 import { create, useStore, UseBoundStore, StoreApi } from 'zustand';
 import { useShallow } from 'zustand/shallow';
@@ -22,7 +16,7 @@ import {
 import { StorageStore, useStorage } from '../stores/storage';
 import { ThemeStore } from '../stores/theme';
 import type { SlicesWithActions } from '../types';
-import { pick, useDidUpdate, useSynchronizeValue } from '../utility';
+import { useDidUpdate } from '../utility';
 import {
   FragmentDefinitionNode,
   parse,
@@ -69,8 +63,56 @@ export const GraphiQLProvider: FC<GraphiQLProviderProps> = ({
   }
   // @ts-expect-error -- runtime check
   if (props.validationRules) {
-    throw new Error(
-      '`validationRules` prop is removed. Use custom GraphQL worker, see https://github.com/graphql/graphiql/tree/main/packages/monaco-graphql#custom-webworker-for-passing-non-static-config-to-worker.',
+    throw new TypeError(
+      'The `validationRules` prop has been removed. Use custom GraphQL worker, see https://github.com/graphql/graphiql/tree/main/packages/monaco-graphql#custom-webworker-for-passing-non-static-config-to-worker.',
+    );
+  }
+  // @ts-expect-error -- runtime check
+  if (props.query) {
+    throw new TypeError(
+      'The `query` prop has been removed. Use `initialQuery` prop instead, or set value programmatically using:\n' +
+        `
+const queryEditor = useGraphiQL(state => state.queryEditor)
+
+useEffect(() => {
+  queryEditor.setValue(query)
+}, [query])`,
+    );
+  }
+  // @ts-expect-error -- runtime check
+  if (props.variables) {
+    throw new TypeError(
+      'The `variables` prop has been removed. Use `initialVariables` prop instead, or set value programmatically using:\n' +
+        `
+const variableEditor = useGraphiQL(state => state.variableEditor)
+
+useEffect(() => {
+  variableEditor.setValue(variables)
+}, [variables])`,
+    );
+  }
+  // @ts-expect-error -- runtime check
+  if (props.headers) {
+    throw new TypeError(
+      'The `headers` prop has been removed. Use `initialHeaders` prop instead, or set value programmatically using:\n' +
+        `
+const headerEditor = useGraphiQL(state => state.headerEditor)
+
+useEffect(() => {
+  headerEditor.setValue(headers)
+}, [headers])`,
+    );
+  }
+  // @ts-expect-error -- runtime check
+  if (props.response) {
+    throw new TypeError(
+      'The `response` prop has been removed. Set value programmatically using:\n' +
+        `
+const responseEditor = useGraphiQL(state => state.responseEditor)
+
+useEffect(() => {
+  responseEditor.setValue(response)
+}, [response])`,
     );
   }
   return (
@@ -82,14 +124,9 @@ export const GraphiQLProvider: FC<GraphiQLProviderProps> = ({
   );
 };
 
-interface SynchronizeValueProps
-  extends Pick<EditorProps, 'headers' | 'query' | 'response' | 'variables'> {
-  children: ReactNode;
-}
-
 const InnerGraphiQLProvider: FC<InnerGraphiQLProviderProps> = ({
   defaultHeaders,
-  defaultQuery,
+  defaultQuery = DEFAULT_QUERY,
   defaultTabs,
   externalFragments,
   onEditOperationName,
@@ -114,6 +151,7 @@ const InnerGraphiQLProvider: FC<InnerGraphiQLProviderProps> = ({
   referencePlugin,
   visiblePlugin,
   children,
+
   ...props
 }) => {
   const storage = useStorage();
@@ -137,15 +175,14 @@ const InnerGraphiQLProvider: FC<InnerGraphiQLProviderProps> = ({
 
     function getInitialState() {
       // We only need to compute it lazily during the initial render.
-      const query = props.query ?? storage.get(STORAGE_KEY.query) ?? null;
+      const query = props.initialQuery ?? storage.get(STORAGE_KEY.query);
       const variables =
-        props.variables ?? storage.get(STORAGE_KEY.variables) ?? null;
-      const headers = props.headers ?? storage.get(STORAGE_KEY.headers) ?? null;
-      const response = props.response ?? '';
+        props.initialVariables ?? storage.get(STORAGE_KEY.variables);
+      const headers = props.initialHeaders ?? storage.get(STORAGE_KEY.headers);
 
       const { tabs, activeTabIndex } = getDefaultTabState({
         defaultHeaders,
-        defaultQuery: defaultQuery ?? DEFAULT_QUERY,
+        defaultQuery,
         defaultTabs,
         headers,
         query,
@@ -169,7 +206,6 @@ const InnerGraphiQLProvider: FC<InnerGraphiQLProviderProps> = ({
           initialHeaders: headers ?? defaultHeaders ?? '',
           initialQuery:
             query ?? (activeTabIndex === 0 ? tabs[0]!.query : null) ?? '',
-          initialResponse: response,
           initialVariables: variables ?? '',
           onCopyQuery,
           onEditOperationName,
@@ -289,34 +325,15 @@ const InnerGraphiQLProvider: FC<InnerGraphiQLProviderProps> = ({
 
   return (
     <GraphiQLContext.Provider value={storeRef}>
-      <SynchronizeValue {...props}>{children}</SynchronizeValue>
+      {children}
     </GraphiQLContext.Provider>
   );
 };
 
-const SynchronizeValue: FC<SynchronizeValueProps> = ({
-  children,
-  headers,
-  query,
-  response,
-  variables,
-}) => {
-  const { headerEditor, queryEditor, responseEditor, variableEditor } =
-    useGraphiQL(
-      pick('headerEditor', 'queryEditor', 'responseEditor', 'variableEditor'),
-    );
-
-  useSynchronizeValue(headerEditor, headers);
-  useSynchronizeValue(queryEditor, query);
-  useSynchronizeValue(responseEditor, response);
-  useSynchronizeValue(variableEditor, variables);
-  return children as ReactElement;
-};
-
 export function useGraphiQL<T>(selector: (state: SlicesWithActions) => T): T {
   const store = useContext(GraphiQLContext);
   if (!store) {
-    throw new Error('Missing `GraphiQLContext.Provider` in the tree');
+    throw new Error('Missing `GraphiQLContext.Provider` in the tree.');
   }
   return useStore(store.current, useShallow(selector));
 }

packages/graphiql-react/src/components/query-editor.tsx

@@ -218,10 +218,6 @@ export const QueryEditor: FC<QueryEditorProps> = ({
       storage.set(STORAGE_KEY.query, query);
 
       const operationFacts = getAndUpdateOperationFacts(editor);
-      if (operationFacts?.operationName !== undefined) {
-        storage.set(STORAGE_KEY.operationName, operationFacts.operationName);
-      }
-
       // Invoke callback props only after the operation facts have been updated
       onEdit?.(query, operationFacts?.documentAST);
       if (

packages/graphiql-react/src/components/response-editor.tsx

@@ -39,15 +39,9 @@ export const ResponseEditor: FC<ResponseEditorProps> = ({
   ...props
 }) => {
   const { setEditor, run } = useGraphiQLActions();
-  const { fetchError, validationErrors, initialResponse, responseEditor } =
-    useGraphiQL(
-      pick(
-        'fetchError',
-        'validationErrors',
-        'initialResponse',
-        'responseEditor',
-      ),
-    );
+  const { fetchError, validationErrors, responseEditor } = useGraphiQL(
+    pick('fetchError', 'validationErrors', 'responseEditor'),
+  );
   const ref = useRef<HTMLDivElement>(null!);
   useEffect(() => {
     if (fetchError) {
@@ -59,11 +53,7 @@ export const ResponseEditor: FC<ResponseEditorProps> = ({
   }, [responseEditor, fetchError, validationErrors]);
 
   useEffect(() => {
-    const model = getOrCreateModel({
-      uri: RESPONSE_URI,
-      value: initialResponse,
-    });
-    // Build the editor
+    const model = getOrCreateModel({ uri: RESPONSE_URI, value: '' });
     const editor = createEditor(ref, {
       model,
       readOnly: true,

packages/graphiql-react/src/constants.ts

@@ -48,7 +48,6 @@ export const STORAGE_KEY = {
   query: 'query',
   variables: 'variables',
   tabs: 'tabState',
-  operationName: 'operationName',
   persistHeaders: 'shouldPersistHeaders',
   theme: 'theme',
 } as const;