How do I update List content based on async JS Query

Issue

I am having trouble updating the content of my List widget after clicking a toggle button which runs an async JS function with different settings. The data in the List widget does not update, even though the function returns new data. I am looking for a solution to update the List content.

Resolution

There is a known bug in Appsmith where List widgets do not update with new data after page load if the data is generated by an async JS function. As a workaround, you can use the storeValue() method to save the result of the async function to an Appsmith store, and then retrieve that value to populate the List widget.

Here is an example of how you could use the storeValue() method:

JS.loadData = async () => {
  // your async function logic here...
  const result = await asyncFunction();

  // store the result in the Appsmith store
  await storeValue("myData", result);

  return result;
}

Then, in your List widget, you can use a Data query to retrieve the stored value and populate the List:

Data query:
{{ getAppsmithStore('myData') }}

List widget:
Items: {{ data }}

Updated

How do I update List content based on async JS Query