Merge pull request #7469 from QwikDev/v2-resource-initial-state

fix: correctly handle initial resource state

Author: wmertens

.changeset/eighty-ligers-wink.md

@@ -0,0 +1,5 @@
+---
+'@qwik.dev/core': patch
+---
+
+fix: correctly handle initial resource state

packages/qwik/src/core/tests/use-resource.spec.tsx

@@ -519,4 +519,72 @@ describe.each([
       </Component>
     );
   });
+
+  it('should render array from resource', async () => {
+    const Cmp = component$(() => {
+      const resource = useResource$(() => {
+        return [
+          {
+            id: 1,
+            name: 'John Doe',
+            age: 30,
+          },
+          {
+            id: 2,
+            name: 'Jane Smith',
+            age: 25,
+          },
+        ];
+      });
+
+      return (
+        <Resource
+          value={resource}
+          onResolved={(res) => {
+            return res.map((val, index) => (
+              <div key={index}>
+                <p>{val.id}</p>
+                <p>{val.name}</p>
+                <p>{val.age}</p>
+              </div>
+            ));
+          }}
+        />
+      );
+    });
+
+    const { vNode } = await render(<Cmp />, { debug });
+    expect(vNode).toMatchVDOM(
+      <Component ssr-required>
+        <InlineComponent>
+          <Fragment>
+            <Awaited>
+              <div>
+                <p>
+                  <Signal>1</Signal>
+                </p>
+                <p>
+                  <Signal>John Doe</Signal>
+                </p>
+                <p>
+                  <Signal>30</Signal>
+                </p>
+              </div>
+              <div>
+                <p>
+                  <Signal>2</Signal>
+                </p>
+                <p>
+                  <Signal>Jane Smith</Signal>
+                </p>
+                <p>
+                  <Signal>25</Signal>
+                </p>
+              </div>
+            </Awaited>
+          </Fragment>
+        </InlineComponent>
+      </Component>
+    );
+  });
 });

packages/qwik/src/core/use/use-resource.ts

@@ -185,7 +185,7 @@ export const Resource = <T>(props: ResourceProps<T>): JSXOutput => {
 
 function getResourceValueAsPromise<T>(props: ResourceProps<T>): Promise<JSXOutput> | JSXOutput {
   const resource = props.value as ResourceReturnInternal<T> | Promise<T> | Signal<T>;
-  if (isResourceReturn(resource) && resource.value) {
+  if (isResourceReturn(resource)) {
     const isBrowser = !isServerPlatform();
     if (isBrowser) {
       // create a subscription for the resource._state changes
@@ -204,10 +204,16 @@ function getResourceValueAsPromise<T>(props: ResourceProps<T>): Promise<JSXOutpu
         }
       }
     }
-    return resource.value.then(
-      useBindInvokeContext(props.onResolved),
-      useBindInvokeContext(props.onRejected)
-    );
+    const value = resource.value;
+    if (value) {
+      return value.then(
+        useBindInvokeContext(props.onResolved),
+        useBindInvokeContext(props.onRejected)
+      );
+    } else {
+      // this is temporary value until the `runResource` is executed and promise is assigned to the value
+      return Promise.resolve(undefined);
+    }
   } else if (isPromise(resource)) {
     return resource.then(
       useBindInvokeContext(props.onResolved),