Handle formBody schema fields other than string or file (#1313)

Co-authored-by: Arda TANRIKULU <[email protected]>

Author: colonel-sanders

.changeset/flat-pans-relax.md

@@ -0,0 +1,5 @@
+---
+"fets": minor
+---
+
+Support for multipart fields other than string or file

packages/fets/src/client/createClient.ts

@@ -4,6 +4,7 @@ import { iterateAsyncVoid } from '@whatwg-node/server';
 import { EMPTY_OBJECT } from '../plugins/utils.js';
 import { HTTPMethod } from '../typed-fetch.js';
 import { OpenAPIDocument, Router, SecurityScheme } from '../types.js';
+import { isBlob } from '../utils.js';
 import { createClientTypedResponsePromise } from './clientResponse.js';
 import {
   ClientMethod,
@@ -213,7 +214,7 @@ export function createClient({
               for (const key in formDataBody) {
                 const value = formDataBody[key];
                 if (value != null) {
-                  requestInit.body.append(key, value);
+                  requestInit.body.append(key, isBlob(value) ? value : value.toString());
                 }
               }
             }

packages/fets/src/utils.ts

@@ -28,3 +28,7 @@ export function asyncIterationUntilReturn<TInput, TOutput>(
   }
   return iterate();
 }
+
+export function isBlob(value: any): value is Blob {
+  return value.arrayBuffer !== undefined;
+}

packages/fets/tests/client/client-formdata.test.ts

@@ -0,0 +1,33 @@
+import { createClient, type NormalizeOAS } from 'fets';
+import { File, Request, Response } from '@whatwg-node/fetch';
+import type clientFormDataOAS from './fixtures/example-formdata';
+
+describe('Client', () => {
+  describe('POST', () => {
+    type NormalizedOAS = NormalizeOAS<typeof clientFormDataOAS>;
+    const client = createClient<NormalizedOAS>({
+      endpoint: 'https://postman-echo.com',
+      async fetchFn(info, init) {
+        const request = new Request(info, init);
+        const formdataReq = await request.formData();
+        return Response.json({
+          formdata: Object.fromEntries(formdataReq.entries()),
+        });
+      },
+    });
+    it('handles formdata with non-string values', async () => {
+      const response = await client['/post'].post({
+        formData: {
+          blob: new File(['foo'], 'foo.txt'),
+          boolean: true,
+          number: 42,
+        },
+      });
+      const resJson = await response.json();
+      expect(resJson.formdata).toMatchObject({
+        boolean: 'true',
+        number: '42',
+      });
+    });
+  });
+});

packages/fets/tests/client/client-query-serialization.spec.ts

@@ -2,40 +2,41 @@ import { createClient, type NormalizeOAS } from 'fets';
 import { Request, Response } from '@whatwg-node/fetch';
 import type clientQuerySerializationOAS from './fixtures/example-client-query-serialization-oas';
 
-type NormalizedOAS = NormalizeOAS<typeof clientQuerySerializationOAS>;
-
 describe('Client', () => {
-  const client = createClient<NormalizedOAS>({
-    endpoint: 'https://postman-echo.com',
-    fetchFn(info, init) {
-      const request = new Request(info.toString(), init);
-      return Promise.resolve(
-        Response.json({
-          url: request.url,
-        }),
-      );
-    },
-  });
-  it('should support deep objects in query', async () => {
-    const response = await client['/get'].get({
-      query: {
-        shallow: 'foo',
-        deep: {
-          key1: 'bar',
-          key2: 'baz',
-        },
-        array: ['qux', 'quux'],
+  describe('GET', () => {
+    type NormalizedOAS = NormalizeOAS<typeof clientQuerySerializationOAS>;
+    const client = createClient<NormalizedOAS>({
+      endpoint: 'https://postman-echo.com',
+      fetchFn(info, init) {
+        const request = new Request(info.toString(), init);
+        return Promise.resolve(
+          Response.json({
+            url: request.url,
+          }),
+        );
       },
     });
+    it('should support deep objects in query', async () => {
+      const response = await client['/get'].get({
+        query: {
+          shallow: 'foo',
+          deep: {
+            key1: 'bar',
+            key2: 'baz',
+          },
+          array: ['qux', 'quux'],
+        },
+      });
 
-    const resJson = await response.json();
+      const resJson = await response.json();
 
-    expect(resJson.url).toBe(
-      'https://postman-echo.com/get?shallow=foo&deep%5Bkey1%5D=bar&deep%5Bkey2%5D=baz&array=qux&array=quux',
-    );
-  });
-  it('lazily handles json', async () => {
-    const resJson = await client['/get'].get().json();
-    expect(resJson.url).toBe('https://postman-echo.com/get');
+      expect(resJson.url).toBe(
+        'https://postman-echo.com/get?shallow=foo&deep%5Bkey1%5D=bar&deep%5Bkey2%5D=baz&array=qux&array=quux',
+      );
+    });
+    it('lazily handles json', async () => {
+      const resJson = await client['/get'].get().json();
+      expect(resJson.url).toBe('https://postman-echo.com/get');
+    });
   });
 });

packages/fets/tests/client/fixtures/example-formdata.ts

@@ -0,0 +1,63 @@
+/* eslint-disable */
+export default {
+  openapi: '3.0.3',
+  servers: ['https://postman-echo.com'],
+  paths: {
+    '/post': {
+      post: {
+        requestBody: {
+          content: {
+            'multipart/form-data': {
+              schema: {
+                type: 'object',
+                properties: {
+                  blob: {
+                    type: 'string',
+                    format: 'binary',
+                  },
+                  boolean: {
+                    type: 'boolean',
+                  },
+                  number: {
+                    type: 'number',
+                  },
+                },
+                additionalProperties: false,
+                required: ['blob', 'boolean', 'number'],
+              },
+            },
+          },
+          required: true,
+        },
+        responses: {
+          '200': {
+            description: '',
+            content: {
+              'application/json; charset=utf-8': {
+                schema: {
+                  type: 'object',
+                  properties: {
+                    formdata: {
+                      type: 'object',
+                      properties: {
+                        blob: {
+                          type: 'string',
+                        },
+                        boolean: {
+                          type: 'boolean',
+                        },
+                        number: {
+                          type: 'number',
+                        },
+                      },
+                    },
+                  },
+                },
+              },
+            },
+          },
+        },
+      },
+    },
+  },
+} as const;

packages/fets/tests/client/fixtures/example-oas.ts

@@ -211,6 +211,7 @@ export default {
                 properties: {
                   file: { type: 'string', format: 'binary' },
                   description: { type: 'string', maxLength: 255 },
+                  licensed: { type: 'boolean' },
                 },
                 required: ['file'],
                 additionalProperties: false,

packages/fets/tests/client/oas-test.ts

@@ -80,6 +80,7 @@ const uploadRes = await client['/upload'].post({
   formData: {
     file: new File(['Hello world'], 'hello.txt'),
     description: 'Greetings',
+    licensed: true,
   },
 });