feat(core): Support application/x-www-form-urlencoded content type (#461)

Co-authored-by: Michael Angelo Rivera <55844504+michaelangeloio@users.noreply.github.com>

Author: alex-way

.changeset/thin-numbers-taste.md

@@ -0,0 +1,5 @@
+---
+'@ts-rest/core': minor
+---
+
+feat: `@ts-rest/core`: Add support for `x-www-form-urlencoded` content-type to core client

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

@@ -61,6 +61,15 @@ const postsRouter = c.router({
       authorId: z.string(),
     }),
   },
+  createPostXForm: {
+    method: 'POST',
+    path: '/posts',
+    responses: {
+      200: c.response<Post>(),
+    },
+    body: z.string(),
+    contentType: 'application/x-www-form-urlencoded'
+  },
   mutationWithQuery: {
     method: 'POST',
     path: '/posts',
@@ -325,7 +334,7 @@ describe('client', () => {
           published: true,
           filter: { title: 'test' },
         },
-        
+
       });
 
       expect(result.body).toStrictEqual(value);
@@ -436,6 +445,32 @@ describe('client', () => {
       expect(result.headers.get('Content-Type')).toBe('application/json');
     });
 
+    it('w/ body and content-type header', async () => {
+      const value = "key=value";
+      fetchMock.postOnce(
+        {
+          url: 'https://api.com/posts',
+          headers: {
+            "content-type": "application/x-www-form-urlencoded"
+          }
+        },
+        {
+          body: value,
+          status: 200,
+          headers: {
+            "content-type": "application/x-www-form-urlencoded"
+          }
+        }
+      );
+
+      const result = await client.posts.createPostXForm({
+        body: "key=value",
+      });
+
+      expect(result.status).toBe(200);
+      expect(result.headers.get('Content-Type')).toBe('application/x-www-form-urlencoded');
+    });
+
     it('w/ query params', async () => {
       fetchMock.postOnce(
         {

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

@@ -221,6 +221,27 @@ export const fetchApi = ({
     });
   }
 
+  if (route.method !== 'GET' && route.contentType === 'application/x-www-form-urlencoded') {
+    const headers = {
+      ...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),
+      rawBody: body,
+      rawQuery: query,
+      contentType: 'application/x-www-form-urlencoded',
+      signal,
+      next,
+      ...extraInputArgs,
+    });
+  }
+
   const includeContentTypeHeader =
     route.method !== 'GET' && body !== null && body !== undefined;
 

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

@@ -54,7 +54,7 @@ export type AppRouteQuery = AppRouteCommon & {
  */
 export type AppRouteMutation = AppRouteCommon & {
   method: 'POST' | 'DELETE' | 'PUT' | 'PATCH';
-  contentType?: 'application/json' | 'multipart/form-data';
+  contentType?: 'application/json' | 'multipart/form-data' | 'application/x-www-form-urlencoded';
   body: ContractAnyType;
 };