Fine grained update page data after form submission instead of "invalidateAll".

[BahaaZidan]

I have a page with an expensive load function and with lots of forms that do very small changes to the page data. I don't want to have to rerun the entire load function after every form submission.

After a couple hours of reading docs, github issues, and googling, this is what I came up with:

<script>
  export let data;
  $: ({ video } = data);
</script>

<form
  method="post"
  action="?/repost"
  use:enhance={() => {
    return async ({ result, update }) => {
      if (result.type !== "success") return update();                  
      video.isRepostedByAuthenticatedUser = true;
    }
  }
}
></form>

This seems to work. But I have a bad feeling about it 😓 . Is mutating a variable derived from data prop imperatively like this problematic in svelte-kit ? or is this fine ?

[eltigerchino]

You probably don't want to use update in this example but instead use applyAction which does not call invalidateAll.
See https://kit.svelte.dev/docs/form-actions#progressive-enhancement-customising-use-enhance

The behaviour of applyAction(result) depends on result.type:

• success, failure — sets $page.status to result.status and updates form and $page.form to result.data (regardless of where you are submitting from, in contrast to update from enhance)
• redirect — calls goto(result.location, { invalidateAll: true })
• error — renders the nearest +error boundary with result.error

In all cases, focus will be reset.