From f2a63087b03354f8a613c28231fc1564ae8661b1 Mon Sep 17 00:00:00 2001
From: Gregory Schier <gschier1990@gmail.com>
Date: Thu, 6 Nov 2025 09:33:12 -0800
Subject: [PATCH] Actually fix GraphQLEditor.tsx properly

---
 src-web/components/GrpcEditor.tsx            |  1 -
 src-web/components/HttpRequestPane.tsx       |  1 -
 src-web/components/graphql/GraphQLEditor.tsx | 33 +++++++++++++-------
 3 files changed, 22 insertions(+), 13 deletions(-)

diff --git a/src-web/components/GrpcEditor.tsx b/src-web/components/GrpcEditor.tsx
index 5b511c64..2ebd01a1 100644
--- a/src-web/components/GrpcEditor.tsx
+++ b/src-web/components/GrpcEditor.tsx
@@ -174,7 +174,6 @@ export function GrpcEditor({
         language="json"
         autocompleteFunctions
         autocompleteVariables
-        forceUpdateKey={request.id}
         defaultValue={request.message}
         heightMode="auto"
         placeholder="..."
diff --git a/src-web/components/HttpRequestPane.tsx b/src-web/components/HttpRequestPane.tsx
index e2f6d765..fe33fe0c 100644
--- a/src-web/components/HttpRequestPane.tsx
+++ b/src-web/components/HttpRequestPane.tsx
@@ -409,7 +409,6 @@ export function HttpRequestPane({ style, fullHeight, className, activeRequest }:
                 ) : activeRequest.bodyType === BODY_TYPE_GRAPHQL ? (
                   <Suspense>
                     <GraphQLEditor
-                      key={forceUpdateKey}
                       forceUpdateKey={forceUpdateKey}
                       baseRequest={activeRequest}
                       request={activeRequest}
diff --git a/src-web/components/graphql/GraphQLEditor.tsx b/src-web/components/graphql/GraphQLEditor.tsx
index ea65aff4..84bd7131 100644
--- a/src-web/components/graphql/GraphQLEditor.tsx
+++ b/src-web/components/graphql/GraphQLEditor.tsx
@@ -2,7 +2,7 @@ import type { HttpRequest } from '@yaakapp-internal/models';
 
 import { formatSdl } from 'format-graphql';
 import { useAtom } from 'jotai';
-import { useMemo } from 'react';
+import { useCallback, useMemo } from 'react';
 import { useLocalStorage } from 'react-use';
 import { useIntrospectGraphQL } from '../../hooks/useIntrospectGraphQL';
 import { useStateWithDeps } from '../../hooks/useStateWithDeps';
@@ -45,20 +45,31 @@ export function GraphQLEditor({ request, onChange, baseRequest, ...extraEditorPr
 
     return { query: request.body.query ?? '', variables: request.body.variables ?? '' };
   }, [extraEditorProps.forceUpdateKey]);
+
   const [isDocOpenRecord, setGraphqlDocStateAtomValue] = useAtom(showGraphQLDocExplorerAtom);
   const isDocOpen = isDocOpenRecord[request.id] !== undefined;
 
-  const handleChangeQuery = (query: string) => {
-    const newBody = { query, variables: currentBody.variables || undefined };
-    setCurrentBody(newBody);
-    onChange(newBody);
-  };
+  const handleChangeQuery = useCallback(
+    (query: string) => {
+      setCurrentBody(({ variables }) => {
+        const newBody = { query, variables };
+        onChange(newBody);
+        return newBody;
+      });
+    },
+    [onChange, setCurrentBody],
+  );
 
-  const handleChangeVariables = (variables: string) => {
-    const newBody = { query: currentBody.query, variables: variables || undefined };
-    setCurrentBody(newBody);
-    onChange(newBody);
-  };
+  const handleChangeVariables = useCallback(
+    (variables: string) => {
+      setCurrentBody(({ query }) => {
+        const newBody = { query, variables: variables || undefined };
+        onChange(newBody);
+        return newBody;
+      });
+    },
+    [onChange, setCurrentBody],
+  );
 
   const actions = useMemo<EditorProps['actions']>(
     () => [