Remote Functions Patterns

Testing all patterns for loading data with SvelteKit remote functions

Top-level await

Using {#await query()} directly in template

Direct .current access

Accessing query().current property in script

Derived reactive query

Using $derived() to create reactive queries

Manual refresh

Calling .refresh() method on demand

Command pattern

Using command() for mutations

Form pattern

Using form() with progressive enhancement

Advanced form pattern

Comprehensive form demo: nested objects, arrays, files, validation, and more

Error boundary

Using <svelte:boundary> to catch errors

Dynamic import with await inside

Lazy-loading component that uses top-level await

Dynamic import (no # syntax test)

Testing if {await} works without # symbol

Batched queries

Multiple queries batched into a single network request

Waterfall loading (anti-pattern)

Sequential loading where each query depends on the previous result