Issue with asynchronous useStorage hook during simultaneous component rendering

Retired Boards Appdev Extensions
,
1

I’m trying to add a custom field for each shipping method in the Checkout UI. The problem arises when rendering components at the position “purchase.checkout.shipping-option-item.render-after” simultaneously.

CleanShot 2024-08-12 at 16.25.31@2x.png
CleanShot 2024-08-12 at 16.25.31@2x.png984×958 110 KB

These components need to calculate and retrieve custom field information using the useStorage hook. However, since useStorage is asynchronous, the data might not be in sync when these components render together, leading to incorrect calculations.

For example, let’s say there are three components (1, 2, and 3). Each one reads from and writes to storage. Because they’re rendered simultaneously by default, the storage state might not reflect the most recent values, which can cause errors in the calculations.

The core issue: The asynchronous nature of useStorage means that when component 2 is rendering, the writing process in component 1 might not be finished, so component 2 can’t access the updated value that component 1 wrote.

How can I handle this asynchronous issue to ensure that each component has access to the most up-to-date storage values during rendering?

2

Hi Pavocado,

It isn’t possible to “subscribe” to changes in storage at this time, although our checkout team has identified this as a valid feature request, and have logged this. It’s possible you could also use metafields to set this information - and these are subscribable.

3

Thanks. We have found another way to work around it :wink:

4

@pavocado What solution did you found?

5

Here’s what we have done

let updateQueue = Promise.resolve(); // Init queue
/**
 * Create a asynchronous queue for updating storage
 * This is used to ensure that when we update the storage, it's done in a serial manner
 * This prevents the situation where multiple updates are done at the same time, which can lead to lost data
 * @param {Storage} storage - The storage object to update
 * @param {string} key - The key to update in the storage
 * @param {(data: any) => any} handle - The function to call when updating the storage
 *  {Promise