Svelte - UI does not get rendered which data I fetch from API - fetch

Question

This is my script-tag:
<script lang="ts">
import Card from "../../components/Card.svelte";
import { onMount } from "svelte";
let show_all = false;
let data: Array<{id: number, image_url: string, description: string, link: string, title: string}> = [];
onMount(async () => {
try {
console.log(data)
let response = await fetch("http://localhost:4000/entries");
data = await response.json();
} catch(err) {
console.log(err);
}
});
const getData = async () => {
console.log(data)
if (!show_all) {
return data.slice(0, 12);
} else {
return data;
}
</script>
I render the data like this:
{#await getData()}
<p>...waiting</p>
{:then array}
{#each array as item (item.id)}
<Card image_url={item.image_url} description={item.description} link={item.link} title={item.title} />
{/each}
{:catch error}
<p style="color: red">{error.message}</p>
{/await}
Fetching the data from the API works fine, but it seems to getData() function works with the empty array, not with data after it has been updated.
What am I doing wrong here? I thought using the onMount hook would guarantee that the UI gets rendered after the data was fetched.
Can anyone help me to fix this
The order is also logged here:
getdata
hook
hook should be called before getData

Answer 1

The problem is, as you mentioned, the order. getData() runs before the onMount callback. I assume waiting... should be shown while the data is fetched and the displayed data should also react to changes of show_all?
Here's one way in case data isn't otherwise needed inside the script tag
<script lang="ts">
import Card from "../../components/Card.svelte";
let show_all = false;
const getData = async () => {
try {
let response = await fetch("http://localhost:4000/entries");
return await response.json();
} catch(err) {
console.log(err);
}
}
</script>
{#await getData()}
<p>...waiting</p>
{:then data}
{#const dataToBeShown = show_all ? data : data.slice(0, 12)}
{#each dataToBeShown as item (item.id)}
<Card {...item} />
{/each}
{:catch error}
<p style="color: red">{error.message}</p>
{/await}
in case it is
<script lang="ts">
import Card from "../../components/Card.svelte";
let show_all = false;
let data: Array<{id: number, image_url: string, description: string, link: string, title: string}> = [];
$: dataToBeShown = show_all ? data : data.slice(0, 12)
const getData = async () => {
try {
let response = await fetch("http://localhost:4000/entries");
data = await response.json();
} catch(err) {
console.log(err);
}
}
</script>
{#await getData()}
<p>...waiting</p>
{:then _}
{#each dataToBeShown as item (item.id)}
<Card {...item} />
{/each}
{:catch error}
<p style="color: red">{error.message}</p>
{/await}
Since the property names seem to match >> <Card {...item} />