Use page's actions without a from | submit programmatic/imperative form

[lsdebianchi]

Hello everyone.

It's not clear what to do when we want to use the page actions but we do not have a form.

The docs suggest to expose a JSON API, but I would prefer to keep my server side pattern consistent and keep the easy access to the RequestEvent goodies (things like: { request, cookies, fetch, params, locals } and so on).

This is the closest I've got so far:

// +page.svelte

const triggerSubmit = () => {
	const formData = new FormData();
	formData.append('myField', JSON.stringify({myValue: "value"}));
	fetch(page.url.href + '?/myAction', {
		method: 'POST',
		headers: {
			'Content-Type': 'multipart/form-data'
		},
		body: formData
	});
}

The action seems to be triggered (because if the name myAction doesn't match an action in the +page.server.ts I get an error) but the request's body fails to be parsed. Below the error printed on the server side:

TypeError: Failed to parse body as FormData.
    at node:internal/deps/undici/undici:5675:27
    at successSteps (node:internal/deps/undici/undici:5719:27)
    at fullyReadBody (node:internal/deps/undici/undici:4609:9)
    at process.processTicksAndRejections (node:internal/process/task_queues:105:5)
   at async consumeBody (node:internal/deps/undici/undici:5728:7)

I was wandering:

• I am off mark? What is the correct approach?
• If so, could we add the approach to the docs?

P.S.
I remember that in react / remix they offered a imperative way to trigger actions with the same formData payload pattern. It would be nice to understand if somehting similar could be done in sveltekit.

P.P.S
Thinking more about it, I guess one could create unappended DOM entities (like a form and an input element with the stringified JSON as value) in JS and submit them like that. It does feel very off though.

[brunnerh]

I really do not recommend using actions like this. They return data specifically to be handled internally by SvelteKit. There are ways of handling the response manually (see docs here), but this will probably just unnecessarily complicate things.

The docs suggest to expose a JSON API, but I would prefer to keep my server side pattern consistent and keep the easy access to the RequestEvent goodies (things like: { request, cookies, fetch, params, locals } and so on).

The methods in +server like POST also receive a RequestEvent with all those things.

The code can by the way be fixed by removing the headers because otherwise the boundary will be missing. Browsers will automatically set the content type correctly when posting FormData.

A correctly generated header looks like this:

content-type: multipart/form-data; boundary=----WebKitFormBoundaryR0hjTttT0Lco3W5i

The big question is why you need to do any of that in the first place, though. You can e.g. use the callback of the enhance action to append form data programmatically.

What the best approach is really depends on the specifics of what you are actually trying to do here.

[lsdebianchi]

Hi @brunnerh. Thank you for all your information.

My use-case is when you have no <form> in your svelte template (and it would be contrived to create and populate an invisible one) but your page still need to make a request to the +server.ts.

I was maybe mislead in thinking that Actions were the de facto patter to use to structure the request-response flow in sveltekit pages.
From what you are saying whenever there is no form is better to use the exported POST method in +server.ts.

Followup question:

Using the export const POST: RequestHandler method in +server.ts we cannot react to the (typed) response on the client with let { form } = $props();, correct?

It feels weird to have two patterns for sending/receiving requests and reacting to responses just because at some point the data may or may not touch a form in the UI.
That's maybe why I wanted to keep using formData, so I had to rely only on one mental model of my data flow across my app.

Thanks again.

[brunnerh]

Using the export const POST: RequestHandler method in +server.ts we cannot react to the (typed) response on the client with let { form } = $props();, correct?

Correct. Though you could still manually define shared types and use them on both ends (of course serialization/deserialization might get a bit in the way there; SvelteKit uses devalue internally which is more powerful than JS's default JSON conversions).

It feels weird to have two patterns for sending/receiving requests and reacting to responses just because at some point the data may or may not touch a form in the UI.

Form actions integrate well with basic browser mechanisms which also allows them to work without any JS. It is generally recommended to use them together with progressive enhancement for this reason.

Personally, I would find it more inconsistent to use a manual async request without any forms and then using just one half of the form mechanism. It is also weird semantically given that the property is called form and there is none.

[lsdebianchi]

Fun aside.

In the meantime I came up with this ungodly monstrosity, which is definitely not the right approach. What I find funny though is that it works like a charm and it behaves exactly like a form submission with sveltekit SSR.

export const fakeFormSubmission = (action: string, fieldName: string, fieldValue: any) => {
	const form = document.createElement('form');
	form.method = 'POST';
	form.action = action;
	form.style.display = 'none';

	const input = document.createElement('input');
	input.type = 'text';
	input.name = fieldName;
	input.value = JSON.stringify(fieldValue);

	form.appendChild(input);
	document.body.appendChild(form);
	form.submit();
	setTimeout(() => {
		form.remove();
	}, 500);
};

fakeFormSubmission('?/myAction', 'myField', myContent);

[efreibe]

I tried with the code below and apparently is working without problems, obviously I didn't tested enough to make sure it works in all scenarios:

const formData = new URLSearchParams()
formData.append('id', 'foo')

const response = await fetch(`?/deleteitem`, {
  method: 'POST',
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded',
    'x-sveltekit-action': 'true',
    accept: 'application/json',
  },
  cache: 'no-cache',
  body: formData,
})

console.log(await response.json())

{type: 'success', status: 200, data: '[{"ok":1},true]'}

Maybe you can delete the accept and cache options, and even send data using FormData and still will work.