Redirecting from enhanced forms, goto not working?

[jro66]

Hi all,

I'm using page endpoints and native forms enhanced using the starter kit out-of-the-box enhance function. This works great until I have to handle forms that would normally cause a redirect to another page (e.g., just created a new resource, now navigate to a page for that resource). goto seems like the solution, however it is not replacing the URL (though in the network tools, I can see it request to the new resource).

My endpoint returns something like this:

return {
	status: 302,
	headers: {
		location: `/example/${id}`,
	},
};

My form looks something like this:

<form
	action="/example"
	method="post"
	use:enhance={{
		result: ({ response }) => {
			goto(response.url);
		},
	}}
>

In my trying of random things, I have found that wrapping the goto in a setTimeout() helps, but really is only somewhat consistent when running locally, and when deployed (I'm hosting on Vercel) it still doesn't work most of the time. I suspect this is only hiding the real issue.

I couldn't really find any examples of this, am I just doing something wrong?

Edit: Adding a minimal repo demonstrating above:
https://github.com/jro66/sveltekit-goto-demo

Last tested on [email protected].

[KarolusD]

Actually, I hit the same issue @jro66 any update on this since June?

[mustofa-id]

Look at this line of your example repo, it's invalidate url of form action after result, it seem go to your response.url then back to from.action url. It should work if you remove/comment that line. You may add an option to the form enhance directive for redirect purposes.

[KarolusD]

Thanks, @mustofa-id I've added an additional directive for redirection purposes as u mentioned. I decided I would share my solution in case someone face a similar problem.

to form enhancement function provided here: https://github.com/sveltejs/kit/blob/master/packages/create-svelte/templates/default/src/lib/form.ts
I've added one additional argument called redirect:

    redirect?: ({
      data,
      form,
      response
    }: {
      data: FormData
      response: Response
      form: HTMLFormElement
    }) => void

and based on redirect argument existence I invalidate the current URL or not:

      if (response.ok) {
        if (result) result({ data, form, response })

        if (redirect) {
          redirect({ data, form, response })
        } else {
          const url = new URL(form.action)
          url.search = url.hash = ''
          invalidate(url.href)
        }
      } else if (error) {
// ... 

And you can use it, in this manner:

<form
	method="post"
	action="/users/delete-user/{user.id}?_method=DELETE"
	use:enhance={{
		error: () => handleUserDeleteError(),
		result: () => handleUserDelete(),
		redirect: () => goto('/users')
	}}
>