feat: add retry logic for load client data

Author: Varixo

packages/qwik-router/src/runtime/src/use-endpoint.ts

@@ -4,6 +4,8 @@ import type { ClientPageData, RouteActionValue } from './types';
 import { _deserialize } from '@qwik.dev/core/internal';
 import { prefetchSymbols } from './client-navigate';
 
+const MAX_Q_DATA_RETRY_COUNT = 3;
+
 export const loadClientData = async (
   url: URL,
   element: unknown,
@@ -13,8 +15,9 @@ export const loadClientData = async (
     clearCache?: boolean;
     prefetchSymbols?: boolean;
     isPrefetch?: boolean;
-  }
-) => {
+  },
+  retryCount: number = 0
+): Promise<ClientPageData | undefined> => {
   const pagePathname = url.pathname;
   const pageSearch = url.search;
   const clientDataPath = getClientDataPath(pagePathname, pageSearch, {
@@ -37,6 +40,12 @@ export const loadClientData = async (
       opts.action.data = undefined;
     }
     qData = fetch(clientDataPath, fetchOptions).then((rsp) => {
+      if (rsp.status === 404 && opts?.loaderIds && retryCount < MAX_Q_DATA_RETRY_COUNT) {
+        // retry if the q-data.json is not found with all options
+        // we want to retry with all the loaders
+        opts.loaderIds = undefined;
+        return loadClientData(url, element, opts, retryCount + 1);
+      }
       if (rsp.redirected) {
         const redirectedURL = new URL(rsp.url);
         const isQData = redirectedURL.pathname.endsWith('/q-data.json');

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

@@ -1,4 +1,4 @@
-import type { ClientPageData, SimpleURL } from './types';
+import type { SimpleURL } from './types';
 
 import { createAsyncComputed$, isBrowser } from '@qwik.dev/core';
 import {
@@ -112,16 +112,9 @@ export const createLoaderSignal = (
   return createAsyncComputed$(
     async () => {
       if (isBrowser && loadersObject[loaderId] === _UNINITIALIZED) {
-        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);
-        }
+        const data = await loadClientData(url, undefined, {
+          loaderIds: [loaderId],
+        });
         loadersObject[loaderId] = data?.loaders[loaderId] ?? _UNINITIALIZED;
       }
       return loadersObject[loaderId];

starters/e2e/qwikrouter/loaders.e2e.ts

@@ -181,7 +181,7 @@ test.describe("loaders", () => {
       }
     });
 
-    test.only("should retry with all loaders if one fails", async ({
+    test("should retry with all loaders if one fails", async ({
       page,
       javaScriptEnabled,
     }) => {
@@ -197,9 +197,9 @@ test.describe("loaders", () => {
       });
 
       await page.route(
-        "*/**/qwikrouter-test/loaders-serialization/q-data.json?qloaders=HEA0jeovonw",
+        "*/**/qwikrouter-test/loaders-serialization/q-data.json?qloaders=*",
         async (route) => {
-          await route.abort();
+          await route.fulfill({ status: 404 });
         },
       );
       await page.goto("/qwikrouter-test/loaders-serialization/");