Correct way to handle async data

[marineloken]

So in SvelteKit, we are clearly told by a warning that the recommended way to load async data is through "The fetch that is passed to your load function: https://kit.svelte.dev/docs/load#making-fetch-requests"

But there are plenty of situations where you don't want to load everything server-side, such as when loading a lot of data and you want the user to be able to do other stuff in the app while that data is loading.

In the following example, I am using onMount, checking if we are client-side before initiating the fetch request:

<script lang="ts">
	import { page } from "$app/stores";
	import { WeatherForecast } from "$sandbox/models/WeatherForecast";
	import { onMount } from "svelte";

	let promise: Promise<WeatherForecast[]>;

	async function getForecasts(): Promise<WeatherForecast[]> {
		const res = await fetch("http://localhost:5000/WeatherForecast");
		return await res.json();
	}

	onMount(() => {
		if (typeof window !== "undefined") promise = getForecasts();
	});
</script>

<table>
	<thead>
		<tr>
			<th>Date</th>
			<th>C</th>
			<th>Summary</th>
		</tr>
	</thead>
	<tbody>
		{#if promise}
			{#await promise}
				<tr>
					<td colspan="3">Loading...</td>
				</tr>
			{:then forecasts}
				{#each forecasts as forecast}
					<tr>
						<td>{forecast.date.toISOString()}</td>
						<td>{forecast.temperatureC}</td>
						<td><input type="text" bind:value={forecast.summary} /></td>
					</tr>
				{/each}
			{:catch e}
				<tr>
					<td style="color: crimson;" colspan="3">{e.message}</td>
				</tr>
			{/await}
		{/if}
	</tbody>
</table>

But SvelteKit is still warning that I should use the "The fetch that is passed to your load function: https://kit.svelte.dev/docs/load#making-fetch-requests".
So what is it that SvelteKit wants me to do in this situation if loading this server-side is not desirable?

[eltigerchino]

Hi Matthias, the warning is actually a false positive if you are using Firefox or Safari. #7992 (comment)

I've just put in a fix for this to try and correct when the warning is emitted #9680

[marineloken]

Oh I see.
That changes things then.

[marineloken]

This is more of a Svelte thing and not a SvelteKit thing, but what is best practice for rendering mutable async data?
Take for example where you have a mutable string secondStr that is fetched from a promise, whenever str changes:

<script lang="ts">
	let str = "";

	let secondStr = "";
	$: secondStrPromise = initSecondString(str);
	function initSecondString(str: string): Promise<string> {
		const promise = testPromise(str);
		promise.then((res) => (secondStr = res));
		return promise;
	}
</script>

<input type="text" bind:value={str} />

{#await secondStrPromise}
	<p>Loading...</p>
{:then res}
	<p>Immutable promise result: {res}</p>
	<input type="text" bind:value={secondStr} />
{:catch e}
	<p style="color:crimson;">{e}</p>
{/await}

Here I have to split the promise and value into two separate variables, since I can't do bind:value={res}. It works, but seems a bit awkward.

One solution is of course to just not use the #await blocks, but they are very concise and readable, plus it only renders the latest promise so you don't get a "lag" effect.

Anyone has any thoughts on this?

[daankennes]

Hi Mathias, have you found a satisfactory answer to this question? I'm running into the same issue.