Convert request bodies when changing type

apps/yaak-client/components/HttpRequestPane.tsx

@@ -20,6 +20,7 @@ import { deepEqualAtom } from "../lib/atoms";
 import { languageFromContentType } from "../lib/contentType";
 import { generateId } from "../lib/generateId";
 import { extractPathPlaceholders } from "../lib/pathPlaceholders";
+import { convertRequestBody } from "../lib/requestBodyConversion";
 import {
   BODY_TYPE_BINARY,
   BODY_TYPE_FORM_MULTIPART,
@@ -195,7 +196,14 @@ export function HttpRequestPane({ style, fullHeight, className, activeRequest }:
               });
             };
 
-            const patch: Partial<HttpRequest> = { bodyType };
+            const patch: Partial<HttpRequest> = {
+              bodyType,
+              body: convertRequestBody({
+                body: activeRequest.body,
+                fromBodyType: activeRequest.bodyType,
+                toBodyType: bodyType,
+              }),
+            };
             let newContentType: string | null | undefined;
             if (bodyType === BODY_TYPE_NONE) {
               newContentType = null;

apps/yaak-client/components/graphql/GraphQLEditor.tsx

@@ -14,6 +14,7 @@ import { Editor } from "../core/Editor/LazyEditor";
 import { Banner, FormattedError, Icon } from "@yaakapp-internal/ui";
 import { Separator } from "../core/Separator";
 import { tryFormatGraphql } from "../../lib/formatters";
+import { normalizeGraphQLBody } from "../../lib/requestBodyConversion";
 import { showGraphQLDocExplorerAtom } from "./graphqlAtoms";
 
 type Props = Pick<EditorProps, "heightMode" | "className" | "forceUpdateKey"> & {
@@ -38,17 +39,7 @@ function GraphQLEditorInner({ request, onChange, baseRequest, ...extraEditorProp
   const [currentBody, setCurrentBody] = useStateWithDeps<{
     query: string;
     variables: string | undefined;
-  }>(() => {
-    // Migrate text bodies to GraphQL format
-    // NOTE: This is how GraphQL used to be stored
-    if ("text" in request.body) {
-      const b = tryParseJson(request.body.text, {});
-      const variables = JSON.stringify(b.variables || undefined, null, 2);
-      return { query: b.query ?? "", variables };
-    }
-
-    return { query: request.body.query ?? "", variables: request.body.variables ?? "" };
-  }, [extraEditorProps.forceUpdateKey]);
+  }>(() => normalizeGraphQLBody(request.body), [extraEditorProps.forceUpdateKey]);
 
   const [isDocOpenRecord, setGraphqlDocStateAtomValue] = useAtom(showGraphQLDocExplorerAtom);
   const isDocOpen = isDocOpenRecord[request.id] !== undefined;
@@ -236,11 +227,3 @@ function GraphQLEditorInner({ request, onChange, baseRequest, ...extraEditorProp
     </div>
   );
 }
-
-function tryParseJson(text: string, fallback: unknown) {
-  try {
-    return JSON.parse(text);
-  } catch {
-    return fallback;
-  }
-}