From 3bcc15c0b9f6b27f74545a7df4aa328de8662026 Mon Sep 17 00:00:00 2001
From: Andrew Jiang <andrew@buildwithfern.com>
Date: Thu, 2 May 2024 23:10:47 -0400
Subject: [PATCH] hack: fileforge uses json blob (#789)

---
 .../ui/app/src/api-playground/PlaygroundEndpoint.tsx | 12 ++++++++----
 packages/ui/app/src/api-playground/types/proxy.ts    |  1 +
 .../src/pages/api/fern-docs/proxy/rest.ts            |  9 ++++++++-
 3 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/packages/ui/app/src/api-playground/PlaygroundEndpoint.tsx b/packages/ui/app/src/api-playground/PlaygroundEndpoint.tsx
index 2a7af7580b..bcc622abaf 100644
--- a/packages/ui/app/src/api-playground/PlaygroundEndpoint.tsx
+++ b/packages/ui/app/src/api-playground/PlaygroundEndpoint.tsx
@@ -167,7 +167,7 @@ export const PlaygroundEndpoint: FC<PlaygroundEndpointProps> = ({
     resetWithoutExample,
     types,
 }): ReactElement => {
-    const { basePath } = useDocsContext();
+    const { basePath, domain } = useDocsContext();
     const [response, setResponse] = useState<Loadable<PlaygroundResponse>>(notStartedLoading());
     // const [, startTransition] = useTransition();
 
@@ -187,7 +187,7 @@ export const PlaygroundEndpoint: FC<PlaygroundEndpointProps> = ({
                 url: buildEndpointUrl(endpoint, formState),
                 method: endpoint.method,
                 headers: buildUnredactedHeaders(endpoint, formState),
-                body: await serializeFormStateBody(formState.body, basePath),
+                body: await serializeFormStateBody(formState.body, basePath, domain),
             };
             if (endpoint.responseBody?.shape.type === "stream") {
                 const [res, stream] = await executeProxyStream(req, basePath);
@@ -245,7 +245,7 @@ export const PlaygroundEndpoint: FC<PlaygroundEndpointProps> = ({
                 },
             });
         }
-    }, [basePath, endpoint, formState]);
+    }, [basePath, domain, endpoint, formState]);
 
     return (
         <FernTooltipProvider>
@@ -283,6 +283,7 @@ export const PlaygroundEndpoint: FC<PlaygroundEndpointProps> = ({
 async function serializeFormStateBody(
     body: PlaygroundFormStateBody | undefined,
     basePath: string | undefined,
+    domain: string,
 ): Promise<ProxyRequest.SerializableBody | undefined> {
     if (body == null) {
         return undefined;
@@ -316,7 +317,10 @@ async function serializeFormStateBody(
                         assertNever(value);
                 }
             }
-            return { type: "form-data", value: formDataValue };
+            // this is a hack to allow the API Playground to send JSON blobs in form data
+            // revert this once we have a better solution
+            const isJsonBlob = domain.includes("fileforge");
+            return { type: "form-data", value: formDataValue, isJsonBlob };
         }
         case "octet-stream":
             return { type: "octet-stream", value: await serializeFile(body.value, basePath) };
diff --git a/packages/ui/app/src/api-playground/types/proxy.ts b/packages/ui/app/src/api-playground/types/proxy.ts
index 07f4e747ff..84d850eedc 100644
--- a/packages/ui/app/src/api-playground/types/proxy.ts
+++ b/packages/ui/app/src/api-playground/types/proxy.ts
@@ -5,6 +5,7 @@ export declare namespace ProxyRequest {
     export interface SerializableFormData {
         type: "form-data";
         value: Record<string, SerializableFormDataEntryValue>;
+        isJsonBlob?: boolean; // this is a hack to allow the API Playground to send JSON blobs in form data
     }
 
     export interface SerializableOctetStream {
diff --git a/packages/ui/docs-bundle/src/pages/api/fern-docs/proxy/rest.ts b/packages/ui/docs-bundle/src/pages/api/fern-docs/proxy/rest.ts
index e6df07029d..d39c3e7d2a 100644
--- a/packages/ui/docs-bundle/src/pages/api/fern-docs/proxy/rest.ts
+++ b/packages/ui/docs-bundle/src/pages/api/fern-docs/proxy/rest.ts
@@ -59,8 +59,15 @@ export async function buildRequestBody(body: ProxyRequest.SerializableBody | und
                             );
                             return [key, files] as const;
                         }
-                        case "json":
+                        case "json": {
+                            if (body.isJsonBlob) {
+                                return [
+                                    key,
+                                    new Blob([JSON.stringify(value.value)], { type: "application/json" }),
+                                ] as const;
+                            }
                             return [key, JSON.stringify(value.value)] as const;
+                        }
                         default:
                             assertNever(value);
                     }