Merge pull request #8098 from QwikDev/fix-serverimBHsargs

fix(router): server$ arg serialization

Author: wmertens

packages/qwik-router/src/middleware/request-handler/resolve-request-handlers.ts

@@ -349,7 +349,7 @@ async function runServerFunction(ev: RequestEvent) {
     const isDev = getRequestMode(ev) === 'dev';
     const data = await ev.parseBody();
     if (Array.isArray(data)) {
-      const [qrl, ...args] = data;
+      const [qrl, args] = data;
       if (isQrl(qrl) && qrl.getHash() === serverFnHash) {
         let result: unknown;
         try {

packages/qwik-router/src/runtime/src/server-functions.ts

@@ -457,7 +457,7 @@ export const serverQrl = <T extends ServerFunction>(
         },
         signal: abortSignal,
       };
-      const body = await _serialize([qrl, ...filteredArgs]);
+      const body = await _serialize([qrl, filteredArgs]);
       if (method === 'GET') {
         query += `&${QDATA_KEY}=${encodeURIComponent(body)}`;
       } else {

starters/apps/qwikrouter-test/src/routes/(common)/server-func/index.tsx

@@ -38,6 +38,10 @@ const serverFunctionB = server$(async function b() {
   return this.method;
 });
 
+const argsChecker = server$(async function (...args: any[]) {
+  return args.map(String).join(",");
+});
+
 export const MultipleServerFunctionsInvokedInTask = component$(() => {
   const methodA = useSignal("");
   const methodB = useSignal("");
@@ -61,6 +65,12 @@ export default component$(() => {
   const userAgentEvent = useSignal("");
   const loader = useGetUserAgent();
   const streamingLogs = useSignal("");
+  const serverArgsReceived = useSignal("");
+  const clientArgsReceived = useSignal("");
+
+  useTask$(async () => {
+    serverArgsReceived.value = await argsChecker(1, 1, 1);
+  });
 
   useTask$(async () => {
     userAgent.value = await getUserAgent();
@@ -100,6 +110,14 @@ export default component$(() => {
         </button>
       </section>
       <MultipleServerFunctionsInvokedInTask />
+      <button
+        id="args-checker-button"
+        onClick$={async () => {
+          clientArgsReceived.value = await argsChecker(10, 10);
+        }}
+      >
+        Count Args: {serverArgsReceived.value} / {clientArgsReceived.value}
+      </button>
     </>
   );
 });

starters/e2e/qwikrouter/server.e2e.ts

@@ -1,6 +1,16 @@
 import { expect, test } from "@playwright/test";
 
 test.describe("server$", () => {
+  /** Checks that arguments weren't deduplicated or added */
+  test("receives exactly the args given", async ({ page }) => {
+    await page.goto("/qwikrouter-test/server-func/");
+    const button = page.locator("#args-checker-button");
+
+    await expect(button).toHaveText("Count Args: 1,1,1 / ");
+    await button.click();
+    await expect(button).toHaveText("Count Args: 1,1,1 / 10,10");
+  });
+
   test("this is available", async ({ page }) => {
     await page.goto("/qwikrouter-test/server-func/");
     const host = page.locator(".server-host");