How to redirect page after call to endpoint's del()?

[georgecrawford]

Hey everyone. I wonder if I can ask for some advice on an issue which is puzzling my team.

We have a page (/users/123, for example) which shows a user's information. It has a DELETE button. We have a corresponding shadow endpoint for the route with a get() (to load the user info) and a delete() (to perform the delete against our internal API).

We started off with an on:click handler on the button, which issues a fetch('', {method: 'delete'} call. The endpoint correctly performs the delete.

Our question is about what happens next. We observe that SvelteKit tries to re-render the user's profile page again, and thus calls get() once more, which of course fails because the user has been deleted.

This aligns with the comments in the code example here: https://kit.svelte.dev/docs/routing#endpoints-post-put-patch-delete:

src/routes/items.svelte
<script>
  // The page always has access to props from `get`...
  export let items;
  // ...plus props from `post` when the page is rendered
  // in response to a POST request, for example after
  // submitting the form below
  export let errors;
</script>

However, this doesn't really make sense for DELETE, does it? If I've deleted the resource, it'd be strange to assume I want to re-render the same resource page. POST, PATCH and PUT make sense, but not DELETE.

So, to work around this, I need to issue a redirect. I initially tried it in the endpoint:

export async function del() {
    // we call our API to do the actual delete here

    return {
        status: 303,
        headers: {
            location: `/users`,
        },
    };    
}

But this doesn't work - the fetch implementation follows the redirect (we can see this in the network tab of the browser), but the browser doesn't redirect as it's all performed as programmatic JS and not a page navigation.

This matches what I see from @babichjacob here (#3861) and @mrkishi here (#4466) - they explain that we need to either handle the Location: /users in JS in the Svelte page, or to use a native HTML form with a HTTP method override (e.g. <form method="post" action="/users/123?_method=DELETE">) which would do a full page transition.

The latter method, using HTML, works fine. It's a desirable direction for us to move in, but I don't think we're ready to embrace native HTML forms across the board in our app yet - we're converting a large app from Angular to Svelte, and have click handlers all over the place!

So we'd love to achieve this using fetch. But the problem I can't solve is that after del() finishes, get() is called again, throwing errors.

The eventual question: would you consider this (calling get() after a DELETE) a SvelteKit bug? Or is it expected behaviour, and is there a way for me to achieve what I'm looking for?

[georgecrawford]

I worked out the problem - I needed to set a accept: application/json header on the call to del() to ensure I got a JSON response, rather than HTML (which by necessity performs an SSR, which needs to call get() to load the data for the page). Thanks to 7nik on Discord for helping with this one.