Back to Calendar

Day 12 Remote Functions: Queries

What if fetching server data felt as natural as calling a local function? Remote Functions make Santa's data pipeline dreams come true — no more threading props through layers of components like tangled Christmas lights!

Declare a query in a .remote.ts file by importing from $app/server, and suddenly you can fetch data right inside your components. During SSR it runs as a regular function; on the client, SvelteKit handles the fetch calls behind the scenes. Your database queries and secrets stay safe on the server — no accidental security leaks like closing over variables in other frameworks!

Combined with Svelte's async features, loading a children's wish list in Santa's workshop dashboard becomes delightfully simple: just await your query inside a $derived and iterate with {#each}. The result? Type-safe, secure, and granular data loading that's easy to reason about.

Validate your inputs with any Standard Schema library like Zod or Valibot for extra safety — because even Santa double-checks the naughty and nice lists!

Read the docs

Credits

Illustrations by Icons 8:

  • Santa Hat
  • Santa sleigh
  • Cookie
  • Heart
  • Santa face
  • Present
  • ID
  • Snowflake
  • Snow Globe
  • Question Mark
  • Fairy Lights
  • Piggy Bank
  • Globe
  • Present #2

Illustrations by Elisabet Guba:

  • Clock

Icons by Obra Icons

Challenges by Svelte Ambassadors:

  • Stanislav Khromov
  • Willow (GHOST)
  • Paolo Ricciuti

Santa Tracker Data by NORAD via Danielle Vass