From 5e76a4f3c8b089a1de0c92c9b9c1edc2ae3f49d4 Mon Sep 17 00:00:00 2001
From: Dimitri POSTOLOV <dmytropostolov@gmail.com>
Date: Tue, 17 Dec 2024 02:24:01 +0800
Subject: [PATCH] fix query builder updated only first selected field in query
 editor due recent enabled react-compiler (#3837)

* a

* a
---
 .changeset/long-parents-grow.md             |  6 ++++++
 packages/graphiql-react/src/editor/hooks.ts | 18 ++++++++++++------
 2 files changed, 18 insertions(+), 6 deletions(-)
 create mode 100644 .changeset/long-parents-grow.md

diff --git a/.changeset/long-parents-grow.md b/.changeset/long-parents-grow.md
new file mode 100644
index 00000000000..5161e9448a6
--- /dev/null
+++ b/.changeset/long-parents-grow.md
@@ -0,0 +1,6 @@
+---
+'@graphiql/react': patch
+'@graphiql/plugin-explorer': patch
+---
+
+fix query builder updated only first selected field in query editor due recent enabled react-compiler
diff --git a/packages/graphiql-react/src/editor/hooks.ts b/packages/graphiql-react/src/editor/hooks.ts
index ed9339b3b09..35426968725 100644
--- a/packages/graphiql-react/src/editor/hooks.ts
+++ b/packages/graphiql-react/src/editor/hooks.ts
@@ -3,7 +3,8 @@ import type { EditorChange, EditorConfiguration } from 'codemirror';
 import type { SchemaReference } from 'codemirror-graphql/utils/SchemaReference';
 import copyToClipboard from 'copy-to-clipboard';
 import { parse, print } from 'graphql';
-import { useEffect, useRef, useState } from 'react';
+// eslint-disable-next-line @typescript-eslint/no-restricted-imports -- TODO: check why query builder update only 1st field https://github.com/graphql/graphiql/issues/3836
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 import { useExplorerContext } from '../explorer';
 import { usePluginContext } from '../plugin';
@@ -344,9 +345,8 @@ export function useAutoCompleteLeafs({
 
 // https://react.dev/learn/you-might-not-need-an-effect
 
-export const useEditorState = (
-  editor: 'query' | 'variable' | 'header',
-): [string, (val: string) => void] => {
+export const useEditorState = (editor: 'query' | 'variable' | 'header') => {
+  'use no memo'; // eslint-disable-line react-compiler/react-compiler -- TODO: check why query builder update only 1st field https://github.com/graphql/graphiql/issues/3836
   const context = useEditorContext({
     nonNull: true,
   });
@@ -358,8 +358,14 @@ export const useEditorState = (
     valueString = editorValue;
   }
 
-  const handleEditorValue = (value: string) => editorInstance?.setValue(value);
-  return [valueString, handleEditorValue];
+  const handleEditorValue = useCallback(
+    (value: string) => editorInstance?.setValue(value),
+    [editorInstance],
+  );
+  return useMemo<[string, (val: string) => void]>(
+    () => [valueString, handleEditorValue],
+    [valueString, handleEditorValue],
+  );
 };
 
 /**