handling response from POST in +page.svelte

[stukennedy]

previously I could return data from my POST shadow endpoint method, which meant I could display a success box in my page.
With the latest changes came the removal of data being returned from a POST/UPDATE/PUT/DELETE call.

How do I do this now in my app considering I'm using sveltekit the SSR way; so basic HTML forms calling endpoint methods, not the FE components calling endpoints asynchronously?
(I know I can handle the errors, but don't see how to display various POST responses)

use case:
I'm using Supabase Auth from an endpoint, so my magic link login page is a simple HTML form that when submitted posts the email to its shadow endpoint.
If sending the link fails, I can throw an error and the page can handle it, but when it succeeds I want to be able to show an alert in the page saying the email has been sent.

[david-plugge]

You can redirect to the same URL with a query param like ?success and check for that. I dont think there is a way to respond with data from the POST method.

+page.svelte

<script lang="ts">
	import { goto } from '$app/navigation';
	import { page } from '$app/stores';

	async function handleSubmit(this: HTMLFormElement) {
		const res = await fetch(this.action, {
			headers: {
				Accept: 'application/json'
			},
			method: this.method,
			body: new FormData(this),
			credentials: 'include'
		});

		if (res.ok) {
			goto('?success');
		}
	}
</script>

{#if $page.url.searchParams.has('success')}
	<h1>Success! Check your email inbox</h1>
{:else}
	<form method="post" on:submit|preventDefault={handleSubmit}>
		<input type="email" name="email" placeholder="Email" />
		<button type="submit">Submit</button>
	</form>
{/if}

+page.server.ts

import type { Action } from './$types';

export const POST: Action = async ({ request, url }) => {
	const formData = await request.formData();

	const email = formData.get('email') as string;

	// do the supabase stuff
	console.log(email);

	return {
		location: url.pathname + '?success'
	};
};

[typio]

Hi, import type { Action } from './$types' isn't importing the Action type for me, the only types I have in my autogenerated $types.d.ts files at /.svelte-kit/types/src/routes/something/$types.d.ts are RequestHandler and RequestEvent.

I can get the Action type with import type { Action } from '@sveltejs/kit' is that equivalent?

[typio]

Nevermind, I was in a +server.ts file not a +page.server.ts file so I'm supposed to use RequestHandler.

[stukennedy]

Just seen this ... I ended up solving it a similar way with a queryParam.
I've written up my whole approach to rewriting Supabase Auth with the new SvelteKit changes

https://stukennedy.notion.site/Sveltekit-Supabase-Magic-Link-Auth-using-SSR-08a94511da3e43c9b49ed6ce1f292e38

[stukennedy]

any idea how to handle an error back from the POST endpoint.
I can see you're mean to throw them like this

import { error } from '@sveltejs/kit';

export async function POST() {
  throw error(303, 'bad ting');
}

But no idea how to get the error in the page.