fix: correctly support array query parameters

Author: nlf

lib/index.ts

@@ -63,7 +63,20 @@ export class Client<T extends Route> {
       headers.set("content-type", "application/json");
     }
 
-    const query = new URLSearchParams(options?.query as Record<string, string> ?? {});
+    const query = new URLSearchParams();
+    if (options?.query) {
+      for (const [key, value] of Object.entries(options.query)) {
+        // NOTE: we cast value to string when assigning to URLSearchParams because
+        // it handles actually calling .toString() on the values for us
+        if (Array.isArray(value)) {
+          for (const v of value) {
+            query.append(key, v as string);
+          }
+        } else {
+          query.set(key, value as string);
+        }
+      }
+    }
 
     // use server.inject
     if (this.#server) {
@@ -93,7 +106,7 @@ export class Client<T extends Route> {
     // use a real fetch
     const url = new URL(realPath.startsWith("/") ? realPath.slice(1) : realPath, this.#url);
     for (const [key, value] of query.entries()) {
-      url.searchParams.set(key, value);
+      url.searchParams.append(key, value);
     }
 
     const fetchResponse = await fetch(url, {

test/fetch.ts

@@ -60,6 +60,11 @@ await test("fetch()", async (t) => {
     t.assert.equal(withQueryRes.status, 200);
     t.assert.equal(withQueryRes.url, `${server.info.uri}/query?flag=true`);
     t.assert.deepStrictEqual<SpecificBodyType<routeType, 200>>(withQueryRes.body, { flag: true });
+
+    const multiRes = await client.get("/query", { query: { multi: ["one", "three four"] } });
+    t.assert.equal(multiRes.status, 200);
+    t.assert.equal(multiRes.url, `${server.info.uri}/query?multi=one&multi=three+four`);
+    t.assert.deepStrictEqual<SpecificBodyType<routeType, 200>>(multiRes.body, { flag: false, multi: ["one", "three four"] });
   });
 
   await t.test("GET /param/{param}", async (t: TestContext) => {

test/fixture.ts

@@ -29,15 +29,16 @@ server.route([
       validate: {
         query: Joi.object({
           flag: Joi.boolean().default(false),
+          multi: Joi.array().items(Joi.string()),
         }),
       },
       response: {
         status: {
-          200: Joi.object({ flag: Joi.boolean().required() }),
+          200: Joi.object({ flag: Joi.boolean().required(), multi: Joi.array().items(Joi.string()) }),
         },
       },
-      handler(request: Request<{ Query: { flag: boolean } }>) {
-        return { flag: request.query.flag };
+      handler(request: Request<{ Query: { flag: boolean; multi?: string[] } }>) {
+        return { flag: request.query.flag, multi: request.query.multi };
       },
     },
   },

test/inject.ts

@@ -28,6 +28,11 @@ await test("server.inject()", async (t) => {
     t.assert.equal(withQueryRes.status, 200);
     t.assert.equal(withQueryRes.url, "/query?flag=true");
     t.assert.deepStrictEqual<SpecificBodyType<routeType, 200>>(withQueryRes.body, { flag: true });
+
+    const multiRes = await client.get("/query", { query: { multi: ["one", "three four"] } });
+    t.assert.equal(multiRes.status, 200);
+    t.assert.equal(multiRes.url, "/query?multi=one&multi=three+four");
+    t.assert.deepStrictEqual<SpecificBodyType<routeType, 200>>(multiRes.body, { flag: false, multi: ["one", "three four"] });
   });
 
   await t.test("GET /param/{param}", async (t: TestContext) => {