Best practice for async data-fetching in vanilla Svelte

[vjpr]

This is probably the most common thing people need to do but I am still unsure especially with the new async stuff in the works.

I think a good example is selecting an item from a list, like a combobox.

Would this be the best approach:

<script type="ts">

let {id, selectedId = $bindable()} = $props()

const data = $derived(await fetchItems(id))
const transformedData = $derived(data.map(x => x.data))
const selectedItem  = $derived(transformedData.find(x => x.id === selectedId))
// Or fetch from database
// const selectedItem = $derived(await fetchItem(selectedId))

function handleSelect(itemId) {
  selectedId.value = itemId
}

</script>

Selected: <span>{selectedItem.name}</span>

{#each transformedData as item}
  <div onclick={() => handleSelect(item.id)}>{item}</div>
{/each}

Before with {#await promise then x} blocks you could not access the result of promise in the code which was restrictive. There are many times you want to run a second async operation on the items of the first operation.

Other discussion

https://www.reddit.com/r/sveltejs/comments/1mud7g2/async_svelte_is_awesome_but_best_practices_needed/

[phi-bre]

Yes, AFAIK, that's the intended way of working with the new async features.

Unrelated, but what exactly are you trying to achieve with selectedId = selectedId ?? $state()?
A $bindable() prop is a reactive state property by design.

[vjpr]

Unrelated

Ah thanks I didn't realize!