Using use:enhance in form to get data from action function

[shimulroy842]

Hi, this is my first post in this repository, and trying to self-learn programming. Recently I posted a problem on Reddit and someone there told me, to use the load function always for any data serving from the server after form submission, which is understandable for authentication or other sensitive data. Is this also applicable to less sensitive data like populating table data from the server?

// +page.server.js
export async function load() {
	return {};
}
export const actions = {
	sub: async ({ request }) => {
		const formData = await request.formData();
		const name = formData.get('name');
		let { data, error } = await supabase.rpc('fake_op', {
			name_input: name,
		});
		return {
			data
		};
	}
};

// +page.svelte
let export form // can access the by form.data
<form
	method="POST"
	action="?/sub"
	use:enhance={({ formElement }) => {
		//do something before submit
		return async ({ result, update }) => {
			update();
                 };
       }}>
</form>

is it bad practice to access non sensitive data through the result from use:action like below instead of (form.data)

// +page.svelte
<form
	method="POST"
	action="?/sub"
	use:enhance={({ formElement }) => {
		//do something before submit
		return async ({ result, update }) => {
                        fetchData = result.data.data 
			update();
                 };
       }}>
</form>

[stephane-vanraes]

This is fine

let { data, error } = await supabase.rpc('fake_op', {
  name_input: name,
});

This code, inside the action, will only run server side so there is no leaking of any api keys or other things.
However, if supabase is returning data that you do not want to expose completely to the client you should probably do some sanitizing step here (but in that case you should do it in your loadas well.

[shimulroy842]

Thanks for your time and reply :). By the way, can you suggest some guides for basic sanitization in the load function?

[stephane-vanraes]

@shimulroy842 with "sanitization" in this context I simply mean removing props that shouldn't be passed to the client.

For example:

let { data, error } = await supabase.rpc('fake_op', { name_input: name);

// let's assume this gives an array with items of the form { id, name, email }
// we don't want to pass the emails to the client so we remove those
const sanitized = data.map(d => ({ id: d.id, name: d.name });