Reloading associated form data
This page shows a pattern to reload associated data on a form submit. The plain HTML version simply reloads the page (the normal form behavior) which reloads the data. For associated data you can reload this inside the enhance callback.
Each successful submit appends the name to an in-memory list on the server. The hydrated version refetches /api/guestbook after a successful submit and updates the
list in place. The plain version submits natively, the page re-renders with a fresh guestbook serverProp, and the new name shows up after the reload.
With {@attach enhance(...)}
No entries yet. Be the first to sign.
Plain HTML
No entries yet. Be the first to sign.
<script lang="ts">
import Guestbook from './Guestbook.svelte';
import { files } from './files.ts';
type GuestbookEntry = { id: string; name: string; at: number };
const sources = await loadSources(files);
let { guestbook }: { guestbook: GuestbookEntry[] } = $props();
</script>
<p>
Each successful submit appends the name to an in-memory list on the server. The hydrated version refetches <code>/api/guestbook</code> after a successful submit and updates the
list in place. The plain version submits natively, the page re-renders with a fresh <code>guestbook</code> serverProp, and the new name shows up after the reload.
</p>
<h3>With <code>{'{@attach enhance(...)}'}</code></h3>
<Guestbook entries={guestbook} mochi:hydrate />
<h3>Plain HTML</h3>
<Guestbook entries={guestbook} />
Styles
<style>
h3 {
margin: 1.5rem 0 0.25rem;
font-size: 0.95rem;
font-weight: 600;
color: var(--text-muted);
}
p {
margin: 0 0 0.5rem;
font-size: 0.9rem;
color: var(--text-muted);
}
code {
background: var(--code-bg);
color: var(--code-accent);
padding: 0.05rem 0.35rem;
border-radius: var(--radius-sm);
font-family: var(--font-mono);
font-size: 0.85rem;
}
</style>