diff --git a/packages/qwik/src/core/tests/use-resource.spec.tsx b/packages/qwik/src/core/tests/use-resource.spec.tsx index 9b67131dfbe..53b0eb21c24 100644 --- a/packages/qwik/src/core/tests/use-resource.spec.tsx +++ b/packages/qwik/src/core/tests/use-resource.spec.tsx @@ -339,4 +339,74 @@ describe.each([ ); }); + + it('should update elements correctly inside onResolved fn', async () => { + const ResourceCmp = component$(() => { + const count = useSignal(0); + const resource = useResource$(async ({ track }) => { + track(count); + return count.value + 10; + }); + + return ( + <> + +

Loading..

} + onRejected={() =>

error ...

} + onResolved={(data) => ( + <> +
{data}
+ + + )} + /> + + ); + }); + + const { vNode, container } = await render(, { debug }); + expect(vNode).toMatchVDOM( + + + + + + + +
10
+ +
+
+
+
+
+
+ ); + await trigger(container.element, 'button', 'click'); + + expect(vNode).toMatchVDOM( + + + + + + + +
11
+ +
+
+
+
+
+
+ ); + }); }); diff --git a/packages/qwik/src/core/use/use-resource.ts b/packages/qwik/src/core/use/use-resource.ts index 216fcc81421..ccd194c3360 100644 --- a/packages/qwik/src/core/use/use-resource.ts +++ b/packages/qwik/src/core/use/use-resource.ts @@ -195,8 +195,11 @@ function getResourceValueAsPromise(props: ResourceProps): Promise resource._resolved) as T).then(props.onResolved); + const resolvedValue = untrack(() => resource._resolved) as T; + if (resolvedValue !== undefined) { + // resolved, pending without onPending prop or rejected with onRejected prop + return Promise.resolve(resolvedValue).then(props.onResolved); + } } } return resource.value.then(