Encode the request body if Content-Type set (#2096)

Author: obulat

docs/openapi-fetch/api.md

@@ -192,6 +192,22 @@ or when instantiating the client.
 
 :::
 
+### URL-encoded body
+
+To send a body request in `application/x-www-form-urlencoded` format, which is commonly used to transmit key-value pairs in APIs like OAuth 2.0, pass the appropriate header and body as an object. `openapi-fetch` will automatically encode the body to the correct format.
+
+```ts
+const { data, error } = await client.POST("/tokens", {
+  body: {
+    clientId: "someClientId",
+    clientSecret: "someClientSecret",
+  },
+  headers: {
+    "Content-Type": "application/x-www-form-encoded",
+  },
+});
+```
+
 ## Path serialization
 
 openapi-fetch supports path serialization as [outlined in the 3.1 spec](https://swagger.io/docs/specification/serialization/#path). This happens automatically, based on the specific format in your OpenAPI schema:

packages/openapi-fetch/src/index.js

@@ -73,7 +73,7 @@ export default function createClient(clientOptions) {
             });
     }
 
-    const serializedBody = body === undefined ? undefined : bodySerializer(body);
+    const serializedBody = body === undefined ? undefined : bodySerializer(body, headers);
 
     const defaultHeaders =
       // with no body, we should not to set Content-Type
@@ -578,10 +578,19 @@ export function defaultPathSerializer(pathname, pathParams) {
  * Serialize body object to string
  * @type {import("./index.js").defaultBodySerializer}
  */
-export function defaultBodySerializer(body) {
+export function defaultBodySerializer(body, headers) {
   if (body instanceof FormData) {
     return body;
   }
+  if (headers) {
+    const contentType =
+      headers.get instanceof Function
+        ? (headers.get("Content-Type") ?? headers.get("content-type"))
+        : (headers["Content-Type"] ?? headers["content-type"]);
+    if (contentType === "application/x-www-form-urlencoded") {
+      return new URLSearchParams(body).toString();
+    }
+  }
   return JSON.stringify(body);
 }
 

packages/openapi-fetch/test/common/request.test.ts

@@ -265,6 +265,19 @@ describe("request", () => {
       expect(bodyUsed).toBe(true);
       expect(bodyText).toBe("0");
     });
+
+    test("`application/x-www-form-urlencoded` body", async () => {
+      const { bodyUsed, bodyText } = await fireRequestAndGetBodyInformation({
+        method: "POST",
+        fetchOptions: {
+          body: { key1: "value1", key2: "value2" },
+          headers: { "Content-Type": "application/x-www-form-urlencoded" },
+        },
+      });
+
+      expect(bodyUsed).toBe(true);
+      expect(bodyText).toBe("key1=value1&key2=value2");
+    });
   });
 
   test("cookie header is preserved", async () => {