upd

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

@@ -324,17 +324,17 @@ export function EditorContextProvider(props: EditorContextProviderProps) {
 
   const setShouldPersistHeaders = // eslint-disable-line react-hooks/exhaustive-deps -- false positive, function is optimized by react-compiler, no need to wrap with useCallback
     (persist: boolean) => {
-    if (persist) {
-      storage?.set(STORAGE_KEY_HEADERS, headerEditor?.getValue() ?? '');
-      const serializedTabs = serializeTabState(tabState, true);
-      storage?.set(STORAGE_KEY_TABS, serializedTabs);
-    } else {
-      storage?.set(STORAGE_KEY_HEADERS, '');
-      clearHeadersFromTabs(storage);
-    }
-    setShouldPersistHeadersInternal(persist);
-    storage?.set(PERSIST_HEADERS_STORAGE_KEY, persist.toString());
-  };
+      if (persist) {
+        storage?.set(STORAGE_KEY_HEADERS, headerEditor?.getValue() ?? '');
+        const serializedTabs = serializeTabState(tabState, true);
+        storage?.set(STORAGE_KEY_TABS, serializedTabs);
+      } else {
+        storage?.set(STORAGE_KEY_HEADERS, '');
+        clearHeadersFromTabs(storage);
+      }
+      setShouldPersistHeadersInternal(persist);
+      storage?.set(PERSIST_HEADERS_STORAGE_KEY, persist.toString());
+    };
 
   const lastShouldPersistHeadersProp = useRef<boolean | undefined>();
   useEffect(() => {

packages/graphiql-react/src/plugin.tsx

@@ -152,19 +152,19 @@ export function PluginContextProvider(props: PluginContextProviderProps) {
   const { onTogglePluginVisibility, children } = props;
   const setVisiblePlugin: PluginContextType['setVisiblePlugin'] = // eslint-disable-line react-hooks/exhaustive-deps -- false positive, function is optimized by react-compiler, no need to wrap with useCallback
     plugin => {
-    const newVisiblePlugin = plugin
-      ? plugins.find(
-          p => (typeof plugin === 'string' ? p.title : p) === plugin,
-        ) || null
-      : null;
-    internalSetVisiblePlugin(current => {
-      if (newVisiblePlugin === current) {
-        return current;
-      }
-      onTogglePluginVisibility?.(newVisiblePlugin);
-      return newVisiblePlugin;
-    });
-  };
+      const newVisiblePlugin = plugin
+        ? plugins.find(
+            p => (typeof plugin === 'string' ? p.title : p) === plugin,
+          ) || null
+        : null;
+      internalSetVisiblePlugin(current => {
+        if (newVisiblePlugin === current) {
+          return current;
+        }
+        onTogglePluginVisibility?.(newVisiblePlugin);
+        return newVisiblePlugin;
+      });
+    };
 
   useEffect(() => {
     if (props.visiblePlugin) {

packages/graphiql-react/src/schema.tsx

@@ -174,125 +174,125 @@ export function SchemaContextProvider({
    */
   const introspect = // eslint-disable-line react-hooks/exhaustive-deps -- false positive, function is optimized by react-compiler no need to wrap with useCallback
     () => {
-    /**
-     * Only introspect if there is no schema provided via props. If the
-     * prop is passed an introspection result, we do continue but skip the
-     * introspection request.
-     */
-    if (isSchema(props.schema) || props.schema === null) {
-      return;
-    }
-
-    const counter = ++counterRef.current;
-
-    const maybeIntrospectionData = props.schema;
-
-    async function fetchIntrospectionData() {
-      if (maybeIntrospectionData) {
-        // No need to introspect if we already have the data
-        return maybeIntrospectionData;
-      }
-
-      const parsedHeaders = parseHeaderString(headersRef.current);
-      if (!parsedHeaders.isValidJSON) {
-        setFetchError('Introspection failed as headers are invalid.');
+      /**
+       * Only introspect if there is no schema provided via props. If the
+       * prop is passed an introspection result, we do continue but skip the
+       * introspection request.
+       */
+      if (isSchema(props.schema) || props.schema === null) {
         return;
       }
 
-      const fetcherOpts: FetcherOpts = parsedHeaders.headers
-        ? { headers: parsedHeaders.headers }
-        : {};
-
-      const fetch = fetcherReturnToPromise(
-        fetcher(
-          {
-            query: introspectionQuery,
-            operationName: introspectionQueryName,
-          },
-          fetcherOpts,
-        ),
-      );
-
-      if (!isPromise(fetch)) {
-        setFetchError('Fetcher did not return a Promise for introspection.');
-        return;
-      }
+      const counter = ++counterRef.current;
 
-      setIsFetching(true);
-      setFetchError(null);
+      const maybeIntrospectionData = props.schema;
 
-      let result = await fetch;
+      async function fetchIntrospectionData() {
+        if (maybeIntrospectionData) {
+          // No need to introspect if we already have the data
+          return maybeIntrospectionData;
+        }
+
+        const parsedHeaders = parseHeaderString(headersRef.current);
+        if (!parsedHeaders.isValidJSON) {
+          setFetchError('Introspection failed as headers are invalid.');
+          return;
+        }
+
+        const fetcherOpts: FetcherOpts = parsedHeaders.headers
+          ? { headers: parsedHeaders.headers }
+          : {};
 
-      if (
-        typeof result !== 'object' ||
-        result === null ||
-        !('data' in result)
-      ) {
-        // Try the stock introspection query first, falling back on the
-        // sans-subscriptions query for services which do not yet support it.
-        const fetch2 = fetcherReturnToPromise(
+        const fetch = fetcherReturnToPromise(
           fetcher(
             {
-              query: introspectionQuerySansSubscriptions,
+              query: introspectionQuery,
               operationName: introspectionQueryName,
             },
             fetcherOpts,
           ),
         );
-        if (!isPromise(fetch2)) {
-          throw new Error(
-            'Fetcher did not return a Promise for introspection.',
+
+        if (!isPromise(fetch)) {
+          setFetchError('Fetcher did not return a Promise for introspection.');
+          return;
+        }
+
+        setIsFetching(true);
+        setFetchError(null);
+
+        let result = await fetch;
+
+        if (
+          typeof result !== 'object' ||
+          result === null ||
+          !('data' in result)
+        ) {
+          // Try the stock introspection query first, falling back on the
+          // sans-subscriptions query for services which do not yet support it.
+          const fetch2 = fetcherReturnToPromise(
+            fetcher(
+              {
+                query: introspectionQuerySansSubscriptions,
+                operationName: introspectionQueryName,
+              },
+              fetcherOpts,
+            ),
           );
+          if (!isPromise(fetch2)) {
+            throw new Error(
+              'Fetcher did not return a Promise for introspection.',
+            );
+          }
+          result = await fetch2;
         }
-        result = await fetch2;
-      }
 
-      setIsFetching(false);
+        setIsFetching(false);
 
-      if (result?.data && '__schema' in result.data) {
-        return result.data as IntrospectionQuery;
-      }
+        if (result?.data && '__schema' in result.data) {
+          return result.data as IntrospectionQuery;
+        }
 
-      // handle as if it were an error if the fetcher response is not a string or response.data is not present
-      const responseString =
-        typeof result === 'string' ? result : formatResult(result);
-      setFetchError(responseString);
-    }
+        // handle as if it were an error if the fetcher response is not a string or response.data is not present
+        const responseString =
+          typeof result === 'string' ? result : formatResult(result);
+        setFetchError(responseString);
+      }
 
-    fetchIntrospectionData()
-      .then(introspectionData => {
-        /**
-         * Don't continue if another introspection request has been started in
-         * the meantime or if there is no introspection data.
-         */
-        if (counter !== counterRef.current || !introspectionData) {
-          return;
-        }
+      fetchIntrospectionData()
+        .then(introspectionData => {
+          /**
+           * Don't continue if another introspection request has been started in
+           * the meantime or if there is no introspection data.
+           */
+          if (counter !== counterRef.current || !introspectionData) {
+            return;
+          }
 
-        try {
-          const newSchema = buildClientSchema(introspectionData);
-          setSchema(newSchema);
-          // Optional chaining inside try-catch isn't supported yet by react-compiler
-          if (onSchemaChange) {
-            onSchemaChange(newSchema);
+          try {
+            const newSchema = buildClientSchema(introspectionData);
+            setSchema(newSchema);
+            // Optional chaining inside try-catch isn't supported yet by react-compiler
+            if (onSchemaChange) {
+              onSchemaChange(newSchema);
+            }
+          } catch (error) {
+            setFetchError(formatError(error));
+          }
+        })
+        .catch(error => {
+          /**
+           * Don't continue if another introspection request has been started in
+           * the meantime.
+           */
+          if (counter !== counterRef.current) {
+            return;
           }
-        } catch (error) {
-          setFetchError(formatError(error));
-        }
-      })
-      .catch(error => {
-        /**
-         * Don't continue if another introspection request has been started in
-         * the meantime.
-         */
-        if (counter !== counterRef.current) {
-          return;
-        }
 
-        setFetchError(formatError(error));
-        setIsFetching(false);
-      });
-  };
+          setFetchError(formatError(error));
+          setIsFetching(false);
+        });
+    };
 
   /**
    * Trigger introspection automatically

packages/graphiql-react/src/utility/resize.ts

@@ -74,11 +74,11 @@ export function useDragResize({
 
   const setHiddenElementWithCallback = // eslint-disable-line react-hooks/exhaustive-deps -- false positive, function is optimized by react-compiler, no need to wrap with useCallback
     (element: ResizableElement | null) => {
-    if (element !== hiddenElement) {
-      setHiddenElement(element);
-      onHiddenElementChange?.(element);
-    }
-  };
+      if (element !== hiddenElement) {
+        setHiddenElement(element);
+        onHiddenElementChange?.(element);
+      }
+    };
 
   const firstRef = useRef<HTMLDivElement>(null);
   const dragBarRef = useRef<HTMLDivElement>(null);