How to get data from action to page when using progressive enhancement?

[dideler]

Hi there, new SvelteKit user here, on @sveltejs/kit 1.5.3.

I was under the impression from the Form Actions documentation that the objects you return from actions would be available on the page under form given it's been initialised as export let form: ActionData;. And indeed it does from my testing when using non-enhanced forms.

This would allow you to define behaviour on the page that depends on the action's response. For example, if the action save returned { resource, action: 'save', errors: [] }, then on the page you could check form and show a flash/toast that the save was successful, otherwise show any errors.

At first I was using a default form w/o enhancement. Problem was that doing a form submission would change the URL to include the route that was called, for example from /resource/:id to /resource/:id?/save after calling the save action. I want to perform an action that has a side effect without changing the URL for the user.

Making the form progressive with use:enhance fixed the URL (though it's not clear to me why that worked from the docs). Unfortunately it also makes form undefined, meaning I've lost the action responses. I'm not yet sure if this is a bug, but it may be related to #8513. Am I misunderstanding the patterns and trying to do this incorrectly?

[eltigerchino]

Can you provide a code example of how you're doing the progressive enhancement?

[dideler]

Here is a simplified example of a toy todo app. There's a todo list page, a component used by that page, and the page server which defines the load and actions. The enhanced form is in the list component.

<!-- src/routes/list/[id]/+page.svelte -->
<script lang="ts">
	import type { PageData, ActionData } from './$types';
	import List from '$lib/components/List.svelte';

	export let data: PageData;
	export let form: ActionData;

	console.log('page.svelte data =', data);
	console.log('page.svelte form =', form);
</script>

{#if !data.list}
	<p>Something went wrong: {data.error}</p>
{:else if form?.error}
	<p>Something went wrong: {form.error}</p>
{:else}
	<List list={data.list} />
{/if}

<!-- src/lib/components/List.svelte -->
<script lang="ts">
	import { enhance } from '$app/forms';
	import type { List } from '$lib/types';

	export let list: List;
</script>

<form method="POST" use:enhance>
	<input
		id="input-title"
		type="text"
		name="title"
		placeholder="Title"
		bind:value={list.title}
	/>
	<button id="save-button" formaction="?/save">Save list</button>
	<button id="delete-button" formaction="?/delete">Delete list</button>
</form>

// src/routes/list/[id]/+page.server.ts
import { fail } from '@sveltejs/kit';
import * as db from '$lib/server/database';
import type { Actions, PageServerLoad, RequestEvent } from './$types';

export const load = (async ({ params }) => {
	const list = await db.getList(params.id);

	if (!list) {
		return { list, error: 'List not found' };
	}

	return { list };
}) satisfies PageServerLoad;

export const actions = {
	save: async ({ request, params }: RequestEvent) => {
		let list = await db.getList(params.id);

		if (!list) {
			return fail(404, { list, error: 'List not found' });
		}

		const formData = Object.fromEntries(await request.formData());
		list = { ...list, ...formData };
		list = await db.saveList(list);
		return { list };
	},
	delete: async ({ params }: RequestEvent) => {
		const list = await db.deleteList(params.id);
		if (!list) {
			return fail(404, { list, error: 'List not found' });
		}
		return { list };
	},
} satisfies Actions;

[nurungjii]

Hi I know I'm late but did anyone find a solution to this problem? I'm having the exact same problem where the enhance option will nullify my form.

[eltigerchino]

You’ll have to prove a repository that reproduces this issue. The code snippet above is not enough information

[nurungjii]

Okay never mind, I figured out where I went wrong. It seems that I wasn't using the reactive elements correctly. Sorry for the inconvenience.

[danbachar]

hey how did you solve this? I have a really similar setup, but I am also using superform if that makes any difference?
EDIT: superform has an option called onResult which gives you the form result back from the server