fix: client not encoding application/x-www-form-urlencoded body correctly (#524)

Author: Gabrola

.changeset/tricky-chicken-rush.md

@@ -0,0 +1,5 @@
+---
+'@ts-rest/core': patch
+---
+
+Fix client not correctly encoding application/x-www-form-urlencoded body

libs/ts-rest/core/src/lib/client.spec.ts

@@ -61,14 +61,20 @@ const postsRouter = c.router({
       authorId: z.string(),
     }),
   },
-  createPostXForm: {
+  echoPostXForm: {
     method: 'POST',
-    path: '/posts',
+    path: '/echo',
+    contentType: 'application/x-www-form-urlencoded',
+    body: z.object({
+      foo: z.string(),
+      bar: z.string(),
+    }),
     responses: {
-      200: c.response<Post>(),
+      200: c.otherResponse({
+        contentType: 'text/plain',
+        body: z.string(),
+      }),
     },
-    body: z.string(),
-    contentType: 'application/x-www-form-urlencoded',
   },
   mutationWithQuery: {
     method: 'POST',
@@ -444,32 +450,65 @@ describe('client', () => {
       expect(result.headers.get('Content-Type')).toBe('application/json');
     });
 
-    it('w/ body and content-type header', async () => {
-      const value = 'key=value';
+    it('w/ urlencoded body - passing object', async () => {
       fetchMock.postOnce(
         {
-          url: 'https://api.com/posts',
+          url: 'https://api.com/echo',
           headers: {
             'content-type': 'application/x-www-form-urlencoded',
           },
         },
+        (_, req) => {
+          expect(req.body).toBeInstanceOf(URLSearchParams);
+
+          return {
+            body: req.body!.toString(),
+            status: 200,
+          };
+        },
+      );
+
+      const result = await client.posts.echoPostXForm({
+        body: {
+          foo: 'foo',
+          bar: 'bar',
+        },
+      });
+
+      expect(result.status).toBe(200);
+      expect(result.headers.get('Content-Type')).toBe(
+        'text/plain;charset=UTF-8',
+      );
+      expect(result.body).toBe('foo=foo&bar=bar');
+    });
+
+    it('w/ urlencoded body - passing string', async () => {
+      fetchMock.postOnce(
         {
-          body: value,
-          status: 200,
+          url: 'https://api.com/echo',
           headers: {
             'content-type': 'application/x-www-form-urlencoded',
           },
         },
+        (_, req) => {
+          expect(typeof req.body).toBe('string');
+
+          return {
+            body: req.body,
+            status: 200,
+          };
+        },
       );
 
-      const result = await client.posts.createPostXForm({
-        body: 'key=value',
+      const result = await client.posts.echoPostXForm({
+        body: 'foo=foo&bar=bar',
       });
 
       expect(result.status).toBe(200);
       expect(result.headers.get('Content-Type')).toBe(
-        'application/x-www-form-urlencoded',
+        'text/plain;charset=UTF-8',
       );
+      expect(result.body).toBe('foo=foo&bar=bar');
     });
 
     it('w/ query params', async () => {

libs/ts-rest/core/src/lib/client.ts

@@ -55,7 +55,7 @@ export type ApiFetcherArgs = {
   path: string;
   method: string;
   headers: Record<string, string>;
-  body: FormData | string | null | undefined;
+  body: FormData | URLSearchParams | string | null | undefined;
   rawBody: unknown;
   rawQuery: unknown;
   contentType: AppRouteMutation['contentType'];
@@ -229,13 +229,19 @@ export const fetchApi = ({
       ...combinedHeaders,
       'content-type': 'application/x-www-form-urlencoded',
     };
+
     return apiFetcher({
       route,
       path,
       method: route.method,
       credentials: clientArgs.credentials,
       headers,
-      body: body instanceof FormData ? body : createFormData(body),
+      body:
+        typeof body === 'string'
+          ? body
+          : new URLSearchParams(
+              body as Record<string, string> | URLSearchParams,
+            ),
       rawBody: body,
       rawQuery: query,
       contentType: 'application/x-www-form-urlencoded',

libs/ts-rest/core/src/lib/infer-types.ts

@@ -208,6 +208,8 @@ type ClientInferRequestBase<
           ? never
           : T['contentType'] extends 'multipart/form-data'
           ? FormData | ZodInputOrType<T['body']>
+          : T['contentType'] extends 'application/x-www-form-urlencoded'
+          ? string | ZodInputOrType<T['body']>
           : ZodInputOrType<T['body']>
         : never;
       query: 'query' extends keyof T