Server actions to accompany formActions

[xpertekShaun]

Form Actions are superb. It would be great if we could improve the ability to submit client side fetch's and have a similar DX to form actions.

Currently, form Actions fail unless they get a non-null FormData object. I thought I would float the ideas for hopefully some positive DX

1. If a fetch('?/formation', {method: 'POST', body: JSON.stringify(data)}) was submitted to the formaction, instead of failing, it would behave asif {Content-Type: 'application/json'} was set and process the request.
2. The "formAction" would still look roughly the same, you return serializable data after some processing.
3. It would be great if we got a similar benefit like "use:enhance" in which there is no page reload, but instead the response from the formAction would populate $page.data.
4. This would eliminate a lot of .then().catch() wrangling. And just update the route page with the new data.

Benefits:

1. streamlining client side fetches in much the same way as form actions.
2. client side fetches are often needed on user interactions not specifically linked to form submits, things like dependant form fields, time related updates, form value calculations
3. separation of code, not limited to a single POST function in +server.ts
4. Semantic client actions that can be co-located per route, Leaving core +server.ts api's cleaner
5. As far as I can tell, will not break backwards compatibility

Downsides:
The biggest downside obviously is that client side fetches are not Form actions. Renaming Form actions will lead to a breaking change which we dont want.

Perhaps this functionality can be included instead in +server.ts files?
The page url reload issue we had with form actions wont be an issue here, so we could theoretically keep POST, PUT, GET, PATCH, DELETE (powerful when needed) in +server.ts, but perhaps we could also export an actions object from +server.ts, and name it "Server Actions"?

[david-plugge]

1. If a fetch('?/formation', {method: 'POST', body: JSON.stringify(data)}) was submitted to the formaction, instead of failing, it would behave asif {Content-Type: 'application/json'} was set and process the request.

A form uses {Content-Type: 'application/x-www-form-urlencoded'}, not json. Therefore you need two ways to parse the data. request.formData() for form submission and request.json() for fetch requests.

3. It would be great if we got a similar benefit like "use:enhance" in which there is no page reload, but instead the response from the formAction would populate $page.data.

How should the data get merged?

[xpertekShaun]

Im aware they are different content-types, Im just theorizing what a server action could look like.

eg: in /loan/+server.js

	export const actions = {
		updateLoanAmount: async ({ fetch, request }) => {
			let values = await request.json()
			let updatedLoanAmount = await fetch('/api/loan', {
				method: 'POST',
				body: JSON.stringify(values)
			})
			return {
				loan: updatedLoanAmount
			}
		}
	}

Then in /loan/+page.svelte

<script>
	const calculate = e => fetch('?/calculate', { method: 'POST', body: JSON.stringify({ value: e.target.value }) })} />
</script>

<input type="text" on:change={calculate} />
<p>Loan Amount is: {$page.data.loan}</p>

This feels very similar to how formActions works, but this would be for server actions.
Im not sure how (or even if) the data can get merged

Hope that clears it up?

[david-plugge]

You could create a new FormData object and add a data field with the json stringified data. Then parse the data in the action. A simple helper function could to that.
I guess that should be fine for most use cases?

But i like your idea, would like to hear what the maintainers think about this.

[david-plugge]

// helper function
async function callAction(url: string, data: Record<string, any>): Promise<ActionResult> {
	const formData = new FormData();
	for (const key in data) {
		formData.append(key, data[key]);
	}
	const action = new URL(url, location.href).href;
	const result = await fetch(action, {
		method: 'POST',
		headers: {
			accept: 'application/json',
			'x-sveltekit-action': 'true'
		},
		body: formData
	}).then((res) => res.json());

	return result;
}

// call the action
async function calculate(e) {
	const result = await callAction('?/calculate', { value: e.target.value });
	if (result.type === 'success') {
		await invalidateAll();
	}
	await applyAction(result);
}

[xpertekShaun]

Exactly right, thats how Ive been doing it now, putting stringified JSON into Formdata.

The code you posted above though, is more sophisticated than what I was using.
I didnt even think to call invalidateAll and applyAction. Using those is the closest I imagined a server action to be in my head.

Nice function!

[wngasinur]

i like this idea, currently facing the same issue on sending JSON to form action.
The formdata structure is quite limited, and can be complicated to implement when dealing with complex form, i.e: dealing with array of object, nested object.

It would be just feel unnatural to stringified JSON into FormData.

[david-plugge]

I created a library for that type of stuff.
It supports nested arrays and objects and works perfectly with zod (coerce and validate) and sveltekit, I just have to add an example.
I'd always prefer using actions when possible in sveltekit as they work without client js and you don't have to write any extra code to create a json object on the client.

https://github.com/david-plugge/typed-formdata

Edit:
I added a sveltekit example with zod.