Day 13 Remote Functions: Forms
Yesterday we fetched data with queries — today we write it back with Remote Form Functions! Import form from $app/server in your .remote.ts file, define a schema, and you've got a type-safe form handler ready for action.
The schema does triple duty: it transforms raw FormData into a proper object, validates the input, and provides autocomplete when wiring up your form fields. Use the fields property to connect each input, then spread the form function onto your <form> element. That's it — Santa's wish list submission form is ready!
The best gift? Progressive enhancement comes standard. Your forms work without JavaScript, just like the classics. When JS is available, submissions happen seamlessly without full page reloads.
By default, a form submission refetches all queries to keep data fresh. Want to be more efficient? Add a refresh call inside your form handler for a single-flight mutation — the server sends back the updated data in the same response. One trip to the North Pole instead of two!