When I resolve an array of promise in the jsx, it is always en empty object.

Retired Boards Appdev Custom Storefronts
,

Topic summary

A developer encountered an issue resolving an array of promises in Hydrogen’s JSX when trying to display products from multiple collections on an article page.

Original Problem:

  • Created an array of promises using collectionHandles.map() to query multiple collections
  • Used defer to return the promises from the loader
  • The array appeared empty when resolved in the JSX component

Root Cause:
The defer function doesn’t support nested or array promises—it only handles promises returned directly.

Solution Provided:
Use Promise.all() to resolve the array of promises before returning:

const topProductsPromises = await Promise.all(
  collectionHandles.map((handle, i) => 
    context.storefront.query(TOPPRODUCTS_QUERY, {...})
  )
);

Outcome:
The solution worked. The original poster chose to implement it without await to resolve on the client side instead. Support for nested promise data in defer may be added after Remix’s singleFetch feature stabilizes in v3.

Summarized with AI on November 8. AI used: claude-sonnet-4-5-20250929.
1

I am stuck at resolving an array of promise in Hydrogen

Use case:
I want to show products from multiple collections on the article page
the handles of all those collections are available as a tag of the article

What I am doing:
I am using following code to create an array of promise inside a loader

const collectionHandles = ['handle-one', 'handle-two'];
  const topProductsPromises = collectionHandles.map((handle, i) => {
    return context.storefront.query(TOPPRODUCTS_QUERY, {
      variables: {
        collectionHandle: handle,
        totalProduct: i+4,
      },
    });
  });

I am returning topProductsPromises using defer
inside the jsx component when try to resolve the array, it is an empty array.

Don’t know why?Is there anybody have similar usecase?

2

You are returning an “array of promises” while the “defer” does not yet support nested or array promises; it only supports returning promises directly. Support for nested promise data will be added after the singleFetch feature is stable, possibly in Remix v3. You can check it out here: https://www.youtube.com/live/kL1x9ORAjcg.

1 Like
3

Hello @crpatel

You can use the Below code.

const collectionHandles = ['men', 'women'];
  const topProductsPromises = await Promise.all(collectionHandles.map((handle, i) => {
    return context.storefront.query(TOPPRODUCTS_QUERY, {
      variables: {
        collectionHandle: handle,
        totalProduct: i+4,
      },
    });
  }));

If the solution presented meets your needs and addresses your query effectively, I encourage you to accept it as the chosen answer. This will acknowledge the support you received and aid fellow community members in identifying reliable and effective solutions for their similar concerns.
Thank you.

4

Thanks @Huptech-Web
this solution worked, I just used it without await, i want to resolve it in the client :slightly_smiling_face: .

and some other info I found related to this from remix roadmap