Actually fix GraphQLEditor.tsx properly

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="..."

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}

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 handleChangeQuery = useCallback(
-    const newBody = { query, variables: currentBody.variables || undefined };
+    (query: string) => {
-    setCurrentBody(newBody);
+      setCurrentBody(({ variables }) => {
-    onChange(newBody);
+        const newBody = { query, variables };
-  };
+        onChange(newBody);
+        return newBody;
+      });
+    },
+    [onChange, setCurrentBody],
+  );
 
-  const handleChangeVariables = (variables: string) => {
+  const handleChangeVariables = useCallback(
-    const newBody = { query: currentBody.query, variables: variables || undefined };
+    (variables: string) => {
-    setCurrentBody(newBody);
+      setCurrentBody(({ query }) => {
-    onChange(newBody);
+        const newBody = { query, variables: variables || undefined };
-  };
+        onChange(newBody);
+        return newBody;
+      });
+    },
+    [onChange, setCurrentBody],
+  );
 
   const actions = useMemo<EditorProps['actions']>(
     () => [