fix: nested not serialized loaders

Author: Varixo

.changeset/smooth-cups-press.md

@@ -0,0 +1,5 @@
+---
+'@qwik.dev/router': patch
+---
+
+fix: nested not serialized loaders

packages/qwik-router/src/middleware/request-handler/middleware.request-handler.api.md

@@ -17,7 +17,7 @@ import type { RenderOptions } from '@qwik.dev/core/server';
 import { RequestEvent as RequestEvent_2 } from '@qwik.dev/router/middleware/request-handler';
 import type { RequestHandler as RequestHandler_2 } from '@qwik.dev/router/middleware/request-handler';
 import type { ResolveSyncValue as ResolveSyncValue_2 } from '@qwik.dev/router/middleware/request-handler';
-import type { SerializationStrategy } from '@qwik.dev/core/internal';
+import { SerializationStrategy } from '@qwik.dev/core/internal';
 import type { _serialize } from '@qwik.dev/core/internal';
 import type { ValueOrPromise } from '@qwik.dev/core';
 import type { _verifySerializable } from '@qwik.dev/core/internal';

packages/qwik-router/src/middleware/request-handler/request-event.ts

@@ -1,5 +1,5 @@
 import type { ValueOrPromise } from '@qwik.dev/core';
-import type { SerializationStrategy } from '@qwik.dev/core/internal';
+import { _UNINITIALIZED, type SerializationStrategy } from '@qwik.dev/core/internal';
 import { QDATA_KEY } from '../../runtime/src/constants';
 import {
   LoadedRouteProp,
@@ -14,7 +14,7 @@ import { createCacheControl } from './cache-control';
 import { Cookie } from './cookie';
 import { ServerError } from './error-handler';
 import { AbortMessage, RedirectMessage } from './redirect-handler';
-import { encoder } from './resolve-request-handlers';
+import { encoder, getRouteLoaderPromise } from './resolve-request-handlers';
 import { RewriteMessage } from './rewrite-handler';
 import type {
   CacheControl,
@@ -150,7 +150,7 @@ export function createRequestEvent(
     return new AbortMessage();
   };
 
-  const loaders: Record<string, Promise<any>> = {};
+  const loaders: Record<string, ValueOrPromise<unknown> | undefined> = {};
   const requestEv: RequestEventInternal = {
     [RequestEvLoaders]: loaders,
     [RequestEvLoaderSerializationStrategyMap]: new Map(),
@@ -210,6 +210,10 @@ export function createRequestEvent(
             'You can not get the returned data of a loader that has not been executed for this request.'
           );
         }
+        if (loaders[id] === _UNINITIALIZED) {
+          const isDev = getRequestMode(requestEv) === 'dev';
+          await getRouteLoaderPromise(loaderOrAction, loaders, requestEv, isDev, qwikSerializer);
+        }
       }
 
       return loaders[id];

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

@@ -1,4 +1,5 @@
 import { type QRL } from '@qwik.dev/core';
+import { _UNINITIALIZED } from '@qwik.dev/core/internal';
 import type { Render, RenderToStringResult } from '@qwik.dev/core/server';
 import { QACTION_KEY, QFN_KEY, QLOADER_KEY } from '../../runtime/src/constants';
 import {
@@ -23,8 +24,8 @@ import {
   RequestEvShareServerTiming,
   RequestEvSharedActionId,
   RequestRouteName,
-  getRequestLoaders,
   getRequestLoaderSerializationStrategyMap,
+  getRequestLoaders,
   getRequestMode,
   getRequestTrailingSlash,
   type RequestEventInternal,
@@ -38,7 +39,6 @@ import type {
   RequestHandler,
 } from './types';
 import { IsQData, QDATA_JSON } from './user-response';
-import { _UNINITIALIZED } from 'packages/qwik/core-internal';
 
 export const resolveRequestHandlers = (
   serverPlugins: RouteModule[] | undefined,
@@ -248,6 +248,8 @@ export function loadersMiddleware(routeLoaders: LoaderInternal[]): RequestHandle
         for (const loader of routeLoaders) {
           if (selectedLoaderIds.includes(loader.__id)) {
             currentLoaders.push(loader);
+          } else {
+            loaders[loader.__id] = _UNINITIALIZED;
           }
         }
       } else {
@@ -261,7 +263,7 @@ export function loadersMiddleware(routeLoaders: LoaderInternal[]): RequestHandle
   };
 }
 
-async function getRouteLoaderPromise(
+export async function getRouteLoaderPromise(
   loader: LoaderInternal,
   loaders: Record<string, unknown>,
   requestEv: RequestEventInternal,

starters/apps/qwikrouter-test/src/routes/loaders-serialization/index.tsx

@@ -12,6 +12,11 @@ export const useTestLoaderEager = routeLoader$(
   { serializationStrategy: "always" },
 );
 
+export const useNestedLoader = routeLoader$(async (requestEv) => {
+  const testData = await requestEv.resolveValue(useTestLoader);
+  return { test: testData.test + " nested", abcd: testData.abcd + " nested" };
+});
+
 export default component$(() => {
   const testSignal = useTestLoader();
   const toggle = useSignal(false);
@@ -23,6 +28,7 @@ export default component$(() => {
       </button>
       {toggle.value && <Child />}
       {toggle.value && <ChildEager />}
+      {toggle.value && <NestedChild />}
     </>
   );
 });
@@ -46,3 +52,13 @@ export const ChildEager = component$(() => {
     </>
   );
 });
+
+export const NestedChild = component$(() => {
+  const testSignal = useNestedLoader();
+  return (
+    <>
+      <div id="prop5">{testSignal.value.test}</div>
+      <div id="prop6">{testSignal.value.abcd}</div>
+    </>
+  );
+});

starters/e2e/qwikrouter/loaders.e2e.ts

@@ -178,6 +178,12 @@ test.describe("loaders", () => {
         await expect(page.locator("#prop4")).toHaveText(
           "should serialize this",
         );
+        await expect(page.locator("#prop5")).toHaveText(
+          "some test value nested",
+        );
+        await expect(page.locator("#prop6")).toHaveText(
+          "should not serialize this nested",
+        );
       }
     });
 
@@ -207,7 +213,7 @@ test.describe("loaders", () => {
       if (javaScriptEnabled) {
         await page.locator("#toggle-child").click();
         await page.waitForLoadState("networkidle");
-        expect(loadersRequestCount).toBe(1);
+        expect(loadersRequestCount).toBe(2);
         expect(allLoadersRequestCount).toBe(1);
         await expect(page.locator("#prop1")).toHaveText("some test value");
         await expect(page.locator("#prop2")).toHaveText(
@@ -219,6 +225,12 @@ test.describe("loaders", () => {
         await expect(page.locator("#prop4")).toHaveText(
           "should serialize this",
         );
+        await expect(page.locator("#prop5")).toHaveText(
+          "some test value nested",
+        );
+        await expect(page.locator("#prop6")).toHaveText(
+          "should not serialize this nested",
+        );
       }
     });
   }