Apply encodeURIComponent on path parameter value (#1696)

* Apply encodeURIComponent on path parameter value

* add changeset

* Fix "params / path / allows UTF-8 characters" test

* Add more tests for path parameter encoding

---------

Co-authored-by: Stefan Wachter <[email protected]>

Author: swachter

.changeset/wet-days-crash.md

@@ -0,0 +1,5 @@
+---
+"openapi-fetch": patch
+---
+
+Fix: encode primitive path parameters

packages/openapi-fetch/src/index.js

@@ -424,7 +424,7 @@ export function defaultPathSerializer(pathname, pathParams) {
       nextURL = nextURL.replace(match, `;${serializePrimitiveParam(name, value)}`);
       continue;
     }
-    nextURL = nextURL.replace(match, style === "label" ? `.${value}` : value);
+    nextURL = nextURL.replace(match, style === "label" ? `.${encodeURIComponent(value)}` : encodeURIComponent(value));
   }
   return nextURL;
 }

packages/openapi-fetch/test/index.test.ts

@@ -260,6 +260,42 @@ describe("client", () => {
           );
         });
 
+        it("escapes reserved characters in path segment", async () => {
+          const client = createClient<paths>({ baseUrl });
+          const { getRequestUrl } = useMockRequestHandler({
+            baseUrl,
+            method: "get",
+            path: "/blogposts/*",
+          });
+
+          await client.GET("/blogposts/{post_id}", {
+            params: { path: { post_id: ";/?:@&=+$,# " } },
+          });
+
+          // expect post_id to be encoded properly
+          const url = getRequestUrl();
+          expect(url.pathname).toBe("/blogposts/%3B%2F%3F%3A%40%26%3D%2B%24%2C%23%20");
+        });
+
+        it("does not escape allowed characters in path segment", async () => {
+          const client = createClient<paths>({ baseUrl });
+          const { getRequestUrl } = useMockRequestHandler({
+            baseUrl,
+            method: "get",
+            path: "/blogposts/*",
+          });
+
+          const postId = "aAzZ09-_.!~*'()";
+
+          await client.GET("/blogposts/{post_id}", {
+            params: { path: { post_id: postId } },
+          });
+
+          // expect post_id to stay unchanged
+          const url = getRequestUrl();
+          expect(url.pathname).toBe(`/blogposts/${postId}`);
+        });
+
         it("allows UTF-8 characters", async () => {
           const client = createClient<paths>({ baseUrl });
           const { getRequestUrl } = useMockRequestHandler({
@@ -269,13 +305,12 @@ describe("client", () => {
           });
 
           await client.GET("/blogposts/{post_id}", {
-            params: { path: { post_id: "post?id = 🥴" } },
+            params: { path: { post_id: "🥴" } },
           });
 
           // expect post_id to be encoded properly
           const url = getRequestUrl();
-          expect(url.searchParams.get("id ")).toBe(" 🥴");
-          expect(url.pathname + url.search).toBe("/blogposts/post?id%20=%20%F0%9F%A5%B4");
+          expect(url.pathname).toBe("/blogposts/%F0%9F%A5%B4");
         });
       });