How to efficiently handle data fetching and state updates in Svelte 5 forms using the stale-while-revalidate approach too

[frederikhors]

I have these files. This is real code from a real project.

If I go to /players/new in Svelte Kit I get a form. But before creating a form I need to get some data.

In the example below I'm creating a new formPlayer but I need defaultCoachId and team?.coachId:

let formPlayer = $derived({
  player: newPlayerFromData(defaultCoachId, team?.coachId),
});

I can get them both from browser cache (if any) and from server using the "stale-while-revalidate" approach:

if the data is already in the browser (or in memory) I get it immediately (also if it's stale)

then a call to the server is made and the returned response is used

But this needs to be handled. Right now the code below does not handle it because the response that the server returns is not used in Form.svelte:

let form = $state(formPlayer);

and this is really bad because sometimes the in memory or the browser cache does not already contain the data or contains stale data.

Can you suggest a way to handle this efficiently with Svelte 5?

Should I use an $effect like:

let formPlayer = $state({
  player: newPlayerFromData(defaultCoachId, team?.coachId),
});

$effect(() => {
  if (defaultCoachId) {
    formPlayer.player = newPlayerFromData(defaultCoachId, team?.coachId);
  }

  if (team?.coachId) {
    formPlayer.player = newPlayerFromData(defaultCoachId, team?.coachId);
  }
});

I think this is ugly and I get a warning too for both defaultCoachId and team:

State referenced in its own scope will never update. Did you mean to reference it inside a closure?
https://svelte.dev/e/state_referenced_locallysvelte(state_referenced_locally)

I think this is a real use case, can you advise me the best way to solve it?

Complete code

• new/+page.svelte:

<script lang="ts">
    import { createMutation, createQuery } from '@tanstack/svelte-query';
    import { graphQLClient, type PlayerInput, PlayerCreateQuery, SettingListQuery } from '$lib/graphql';
    import { type PlayerForm, newPlayerFromData } from '../players';
    import Form from './Form.svelte';

    const settingsInput = { condition: { key: 'player' } };

    const settingsResult = createQuery({
        queryKey: ['settings', settingsInput],
        queryFn: async () => await graphQLClient.request(SettingListQuery, { settingsInput })
    });

    const { data: settingsData } = $derived($settingsResult);

    // Here the $derived is needed because `settingsData` updates twice:
    // the first time its value may already be in cache and I immediately
    // get the value or undefined, the second one comes straight from
    // the server and may be the same as the first one or different (because the cache was out of date)
    const defaultCoachId = $derived(settingsData?.edges.find((t) => t.key === 'default_coach_id'));

    const teamsStore = createQuery({
        queryKey: ['team', 'list'],
        queryFn: async () => await graphQLClient.request(TeamListQuery)
    });

    const { data: teamsData } = $derived($teamsStore);

    // Here the $derived is required for the same reason as before
    const team = $derived(teamsData?.edges[0]);

    // Here the $derived is required for the same reason as before
    let formPlayer = $derived({
        player: newPlayerFromData(defaultCoachId, team?.coachId)
    });

    const newMutation = createMutation({
        mutationFn: async (input: PlayerInput) =>
            await graphQLClient.request(PlayerCreateQuery, { input })
    });

    async function submit(form: PlayerForm) {
        try {
            await $newMutation.mutateAsync(validate(form));
        } catch (err) {
            console.error(err);
        }
    }
</script>

<Form {submit} {formPlayer} />

• new/Form.svelte:

<script lang="ts">
    import { createQuery } from '@tanstack/svelte-query';
    import { graphQLClient, SettingListQuery } from '$lib/graphql';
    import { type PlayerForm, type Submit } from './players';

    type Props = {
        formPlayer: PlayerForm;
        submit: Submit;
    };

    let { formPlayer, submit }: Props = $props();

    let form = $state(formPlayer);

    if (!form.player.cards?.length) AddCard();

    const settingsInput = { condition: { key: 'player' } };

    const settingsResult = createQuery({
        queryKey: ['settings', settingsInput],
        queryFn: async () => await graphQLClient.request(SettingListQuery, { settingsInput })
    });

    let { data: settingsData } = $derived($settingsResult);

    // Here the $derived is required for the same reason as before
    const defaultTaxId = $derived(settingsData?.edges.find((t) => t.key === 'default_tax_id'));
</script>

<form onsubmit={preventDefault(() => submit(form))}>
    <ul>
        <input type="text" bind:value={form.player.defaultCoachId} />

        {#each form.player.cards || [] as card, i (card.id)}
            <input type="text" bind:value={card.value} />

            <Tax id={defaultTaxId} />
        {/each}
    </ul>
</form>

I don't know how to reproduce it on the playground, as soon as I find out I'll create it