Properly using success and loading while using a Redwood cell

Hello community,

I’ve been using a query inside the a redwood component. Something similar to this example provided by redwood.

I am calling this component inside a for loop similar to

metrics.map((item, index) => (
          <SimulationCell
            key={index}
            item={item}
            metric={metrics[metrics.length - 1 - index]}
          />
        ))

In this code snippet, metrics is an array like metrics=['first_elem', 'second_elem']. On the front end side, as the user clicks some button, the array gets updated.
When it’s first time going through the above map loop, it works as expected. First the loading() get’s called and then it goes through the success function once the query is returned. However, here is the undesirable consequence of my implementation that I am looking for a solution.

When the user adds a new item to the list, the component gets refreshed. The new added value goes through the loading() or query-phase and while waiting for the values to be retrieved, the older array elements immediately go through the success component. Additionally, once the new added value is returned from the query, all the array elements go through the success function again. Basically, the success function gets called 2N +1 times where N is the number of old array(metrics) elements and 1 is the newly added value to the metrics.
This is undesirable for my cases, since by going through the success component, some state variables inadvertently become true and this will mess up my Loader component.

Thanks and I hope my explanation was clear enough.

1 Like