Support FormData from Server to Client

facebook · Apr 5, 2024 · eee6951 · eee6951
1 parent fd0da3e
commit eee6951
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 0 deletions.
diff --git a/packages/react-client/src/ReactFlightClient.js b/packages/react-client/src/ReactFlightClient.js
@@ -736,6 +736,16 @@ function parseModelString(
         const data = getOutlinedModel(response, id);
         return new Set(data);
       }
+      case 'K': {
+        // FormData
+        const id = parseInt(value.slice(2), 16);
+        const data = getOutlinedModel(response, id);
+        const formData = new FormData();
+        for (let i = 0; i < data.length; i++) {
+          formData.append(data[i][0], data[i][1]);
+        }
+        return formData;
+      }
       case 'I': {
         // $Infinity
         return Infinity;

diff --git a/packages/react-client/src/__tests__/ReactFlight-test.js b/packages/react-client/src/__tests__/ReactFlight-test.js
@@ -468,6 +468,40 @@ describe('ReactFlight', () => {
       `);
   });
 
+  if (typeof FormData !== 'undefined') {
+    it('can transport FormData (no blobs)', async () => {
+      function ComponentClient({prop}) {
+        return `
+          formData: ${prop instanceof FormData}
+          hi: ${prop.get('hi')}
+          multiple: ${prop.getAll('multiple')}
+          content: ${JSON.stringify(Array.from(prop))}
+        `;
+      }
+      const Component = clientReference(ComponentClient);
+
+      const formData = new FormData();
+      formData.append('hi', 'world');
+      formData.append('multiple', 1);
+      formData.append('multiple', 2);
+
+      const model = <Component prop={formData} />;
+
+      const transport = ReactNoopFlightServer.render(model);
+
+      await act(async () => {
+        ReactNoop.render(await ReactNoopFlightClient.read(transport));
+      });
+
+      expect(ReactNoop).toMatchRenderedOutput(`
+          formData: true
+          hi: world
+          multiple: 1,2
+          content: [["hi","world"],["multiple","1"],["multiple","2"]]
+        `);
+    });
+  }
+
   it('can transport cyclic objects', async () => {
     function ComponentClient({prop}) {
       expect(prop.obj.obj.obj).toBe(prop.obj.obj);

diff --git a/packages/react-server/src/ReactFlightServer.js b/packages/react-server/src/ReactFlightServer.js
@@ -1138,6 +1138,12 @@ function serializeMap(
   return '$Q' + id.toString(16);
 }
 
+function serializeFormData(request: Request, formData: FormData): string {
+  const entries = Array.from(formData.entries());
+  const id = outlineModel(request, (entries: any));
+  return '$K' + id.toString(16);
+}
+
 function serializeSet(request: Request, set: Set<ReactClientValue>): string {
   const entries = Array.from(set);
   for (let i = 0; i < entries.length; i++) {
@@ -1506,6 +1512,10 @@ function renderModelDestructive(
     if (value instanceof Set) {
       return serializeSet(request, value);
     }
+    // TODO: FormData is not available in old Node. Remove the typeof later.
+    if (typeof FormData === 'function' && value instanceof FormData) {
+      return serializeFormData(request, value);
+    }
 
     if (enableBinaryFlight) {
       if (value instanceof ArrayBuffer) {
@@ -2027,6 +2037,10 @@ function renderConsoleValue(
     if (value instanceof Set) {
       return serializeSet(request, value);
     }
+    // TODO: FormData is not available in old Node. Remove the typeof later.
+    if (typeof FormData === 'function' && value instanceof FormData) {
+      return serializeFormData(request, value);
+    }
 
     if (enableBinaryFlight) {
       if (value instanceof ArrayBuffer) {