fix: retry computed qrl execution when not ready (#7470)

* feat(qrl): add QRL component and e2e test for inner computed QRL

Introduce a new QRL component to handle inner computed QRL logic and add an e2e test to verify its behavior. The test ensures that the counter updates correctly without uncaught promises. Additionally, update the QRL class to use `retryOnPromise` for better error handling during QRL resolution.

* refactor(e2e): simplify test structure by removing unnecessary describe block

The describe block was removed to streamline the test file and improve readability. The test logic remains unchanged, focusing on verifying the counter update functionality without uncaught promises.

* test(e2e): mark counter update test as .only for focused execution

refactor(qrl): simplify promise handling in QRL class by removing redundant retryOnPromise

* fix test fail

* feat(qrl): add QRL component and e2e test for inner computed QRL

Introduce a new QRL component to handle inner computed QRL logic and add an e2e test to verify its behavior. The test ensures that the counter updates correctly without uncaught promises. Additionally, update the QRL class to use `retryOnPromise` for better error handling during QRL resolution.

* refactor(e2e): simplify test structure by removing unnecessary describe block

The describe block was removed to streamline the test file and improve readability. The test logic remains unchanged, focusing on verifying the counter update functionality without uncaught promises.

* test(e2e): mark counter update test as .only for focused execution

refactor(qrl): simplify promise handling in QRL class by removing redundant retryOnPromise

* fix test fail

* add change

* fix information

* fix ts error

---------

Co-authored-by: wuls <[email protected]>

Author: JerryWu1234

.changeset/sweet-hairs-remember.md

@@ -0,0 +1,5 @@
+---
+'@qwik.dev/core': patch
+---
+
+FIX: Introduce retry logic for QRL resolution to handle potential promise retries, ensuring robustness in asynchronous operations.

packages/qwik/src/core/shared/qrl/qrl-class.ts

@@ -12,7 +12,7 @@ import {
   type InvokeTuple,
 } from '../../use/use-core';
 import { getQFuncs, QInstanceAttr } from '../utils/markers';
-import { isPromise, maybeThen } from '../utils/promises';
+import { isPromise, maybeThen, retryOnPromise } from '../utils/promises';
 import { qDev, qSerialize, qTest, seal } from '../utils/qdev';
 import { isArray, isFunction, type ValueOrPromise } from '../utils/types';
 import type { QRLDev } from './qrl';
@@ -93,7 +93,8 @@ export const createQRL = <TYPE>(
     // Note that we bind the current `this`
     const bound = (...args: QrlArgs<TYPE>): ValueOrPromise<QrlReturn<TYPE> | undefined> => {
       if (!qrl.resolved) {
-        return qrl.resolve().then((fn) => {
+        const promise = retryOnPromise(() => qrl.resolve()) as Promise<TYPE>;
+        return promise.then((fn) => {
           if (!isFunction(fn)) {
             throw qError(QError.qrlIsNotFunction);
           }

starters/apps/e2e/src/components/qrl/qrl.tsx

@@ -0,0 +1,32 @@
+import { $, component$, useComputed$, useSignal } from "@qwik.dev/core";
+
+export const QRL = component$(() => {
+  return (
+    <>
+      <ShouldResolveInnerComputedQRL />
+    </>
+  );
+});
+
+export const ShouldResolveInnerComputedQRL = component$(() => {
+  const test = useComputed$(() => 0);
+  return <InnerComputedButton test={test} />;
+});
+
+export const InnerComputedButton = component$<any>((props) => {
+  const syncSelectionCounter = useSignal(0);
+  const syncSelection = $(() => {
+    syncSelectionCounter.value++;
+    props.test.value;
+  });
+
+  const handleClick = $(() => {
+    syncSelection();
+  });
+
+  return (
+    <button id="inner-computed-button" onClick$={handleClick}>
+      Click Me {syncSelectionCounter.value}
+    </button>
+  );
+});

starters/apps/e2e/src/root.tsx

@@ -35,6 +35,7 @@ import { UseId } from "./components/useid/useid";
 import { Watch } from "./components/watch/watch";
 
 import "./global.css";
+import { QRL } from "./components/qrl/qrl";
 
 const tests: Record<string, FunctionComponent> = {
   "/e2e/two-listeners": () => <TwoListeners />,
@@ -71,6 +72,7 @@ const tests: Record<string, FunctionComponent> = {
   "/e2e/build-variables": () => <BuildVariables />,
   "/e2e/exception/render": () => <RenderExceptions />,
   "/e2e/exception/use-task": () => <UseTaskExceptions />,
+  "/e2e/qrl": () => <QRL />,
 };
 
 export const Root = component$<{ pathname: string }>(({ pathname }) => {

starters/e2e/e2e.qrl.e2e.ts

@@ -0,0 +1,14 @@
+import { expect, test } from "@playwright/test";
+test("should update counter without uncaught promises", async ({ page }) => {
+  await page.goto("/e2e/qrl");
+  page.on("pageerror", (err) => expect(err).toEqual(undefined));
+  page.on("console", (msg) => {
+    if (msg.type() === "error") {
+      expect(msg.text()).toEqual(undefined);
+    }
+  });
+  const button = page.locator("#inner-computed-button");
+  await expect(button).toContainText("Click Me 0");
+
+  await button.click();
+});