how do form actions revalidate data?

I never call revalidate but the boards get updated nonetheless, does form submission revalidate everything?

export default function Home() {
    const boards = createAsync(() => getBoards());
    const submissions = useSubmissions(createBoard);

    createEffect(() => {
        console.log([...submissions.values()]);
    });

    return (
        <div class="flex flex-col gap-4 p-4">
            <div>
                <form action={createBoard} method="post">
                    <input type="hidden" value="Test Board" name="title" />
                    <button class="flex items-center gap-1 rounded bg-neutral-700 px-4 py-2 text-sm font-semibold uppercase">
                        <span class="i-heroicons:plus"></span>
                        <span>Create Board</span>
                    </button>
                </form>
            </div>
            <div class="grid h-full grid-cols-[repeat(auto-fill,minmax(400px,1fr))] gap-4">
                <For each={boards()}>{(board) => <Board board={board} />}</For>
            </div>
        </div>
    );
}

export default function Home() {
    const boards = createAsync(() => getBoards());
    const submissions = useSubmissions(createBoard);

    createEffect(() => {
        console.log([...submissions.values()]);
    });

    return (
        <div class="flex flex-col gap-4 p-4">
            <div>
                <form action={createBoard} method="post">
                    <input type="hidden" value="Test Board" name="title" />
                    <button class="flex items-center gap-1 rounded bg-neutral-700 px-4 py-2 text-sm font-semibold uppercase">
                        <span class="i-heroicons:plus"></span>
                        <span>Create Board</span>
                    </button>
                </form>
            </div>
            <div class="grid h-full grid-cols-[repeat(auto-fill,minmax(400px,1fr))] gap-4">
                <For each={boards()}>{(board) => <Board board={board} />}</For>
            </div>
        </div>
    );
}

6 Replies

Brendonovich•3mo ago

Actions will automatically invalidate all cache functions, so any that are being rendered will refetch automatically

Raqueebuddin AzizOP•3mo ago

got it, thanks

jack•3mo ago

Just stumbled across this- is there a reason for this? feels a bit aggressvie to revalidate everything on each action

Brendonovich•3mo ago

The idea is that actions represent the modification of data. Without any fine tuning the action can’t know what data has been modified, so everything is invalidated. Keep in mind that doesn’t mean that everything gets refetched, only the things that are being used on the page will get refetched immediately

jack•3mo ago

ok true that makes sense thank you

Madaxen86•3mo ago

There’s also a PR extending the docs for actions about revalidation showing examples for any case.

Gaming

Programming

how do form actions revalidate data?