fix: handle q-data fetch error

Author: Varixo

packages/qwik-router/src/runtime/src/qwik-router-component.tsx

@@ -177,8 +177,16 @@ export const QwikRouterProvider = component$<QwikRouterProps>((props) => {
     return env.response.loadersSerializationStrategy.get(loaderId) || 'never';
   };
 
+  // On server this object contains the all the loaders data
+  // On client after resuming this object contains only keys and _UNINITIALIZED as values
+  // Thanks to this we can use this object as a capture ref and not to serialize unneeded data
+  // While resolving the loaders we will override the _UNINITIALIZED with the actual data
   const loadersObject: Record<string, unknown> = {};
+
+  // This object contains the signals for the loaders
+  // It is used for the loaders context RouteStateContext
   const loaderState: Record<string, AsyncComputedReadonlySignal<unknown>> = {};
+
   for (const [key, value] of Object.entries(env.response.loaders)) {
     loadersObject[key] = value;
     loaderState[key] = createLoaderSignal(
@@ -189,6 +197,7 @@ export const QwikRouterProvider = component$<QwikRouterProps>((props) => {
       container
     );
   }
+  // Serialize it as keys and _UNINITIALIZED as values
   (loadersObject as any)[SerializerSymbol] = (obj: Record<string, unknown>) => {
     const loadersSerializationObject: Record<string, unknown> = {};
     for (const [k, v] of Object.entries(obj)) {

packages/qwik-router/src/runtime/src/utils.ts

@@ -1,4 +1,4 @@
-import type { SimpleURL } from './types';
+import type { ClientPageData, SimpleURL } from './types';
 
 import { createAsyncComputed$, isBrowser } from '@qwik.dev/core';
 import {
@@ -112,9 +112,16 @@ export const createLoaderSignal = (
   return createAsyncComputed$(
     async () => {
       if (isBrowser && loadersObject[loaderId] === _UNINITIALIZED) {
-        const data = await loadClientData(url, undefined, {
-          loaderIds: [loaderId],
-        });
+        let data: ClientPageData | undefined;
+        try {
+          // Try to load only the current loader data from the server
+          data = await loadClientData(url, undefined, {
+            loaderIds: [loaderId],
+          });
+        } catch (_) {
+          // If request fails, we try to load all the loaders data from the server
+          data = await loadClientData(url, undefined);
+        }
         loadersObject[loaderId] = data?.loaders[loaderId] ?? _UNINITIALIZED;
       }
       return loadersObject[loaderId];

starters/e2e/qwikrouter/loaders.e2e.ts

@@ -180,5 +180,46 @@ test.describe("loaders", () => {
         );
       }
     });
+
+    test.only("should retry with all loaders if one fails", async ({
+      page,
+      javaScriptEnabled,
+    }) => {
+      let loadersRequestCount = 0;
+      let allLoadersRequestCount = 0;
+      page.on("request", (request) => {
+        if (request.url().includes("q-data.json?qloaders")) {
+          loadersRequestCount++;
+        }
+        if (request.url().endsWith("q-data.json")) {
+          allLoadersRequestCount++;
+        }
+      });
+
+      await page.route(
+        "*/**/qwikrouter-test/loaders-serialization/q-data.json?qloaders=HEA0jeovonw",
+        async (route) => {
+          await route.abort();
+        },
+      );
+      await page.goto("/qwikrouter-test/loaders-serialization/");
+
+      if (javaScriptEnabled) {
+        await page.locator("#toggle-child").click();
+        await page.waitForLoadState("networkidle");
+        expect(loadersRequestCount).toBe(1);
+        expect(allLoadersRequestCount).toBe(1);
+        await expect(page.locator("#prop1")).toHaveText("some test value");
+        await expect(page.locator("#prop2")).toHaveText(
+          "should not serialize this",
+        );
+        await expect(page.locator("#prop3")).toHaveText(
+          "some eager test value",
+        );
+        await expect(page.locator("#prop4")).toHaveText(
+          "should serialize this",
+        );
+      }
+    });
   }
 });