fetch vs actions video final commit

Author: nevthereal

local.db-shm

@@ -1,30 +1,41 @@
 <script lang="ts">
 	import { invalidate } from '$app/navigation';
 	import { todosTable } from '$lib/db/schema';
+	import type { deleteSchema, toggleSchema } from '$lib/zod';
+	import { superForm, type Infer, type SuperValidated } from 'sveltekit-superforms';
+
 	export let todo: typeof todosTable.$inferSelect;
+	export let toggleFormData: SuperValidated<Infer<typeof toggleSchema>>;
+	export let deleteFormData: SuperValidated<Infer<typeof deleteSchema>>;
 
-	const deleteTodo = async () => {
-		await fetch(`/api/delete?id=${todo.id}`);
-		invalidate('query:todos');
-	};
+	const { enhance: toggleEnhance } = superForm(toggleFormData, {
+		onSubmit: ({ formData }) => {
+			formData.set('id', todo.id.toString());
+			formData.set('state', String(todo.completed));
+		},
+		invalidateAll: true
+	});
 
-	const toggleComplete = async () => {
-		await fetch(`/api/toggle?id=${todo.id}`);
-		invalidate('query:todos');
-	};
+	const { enhance: deleteEnhance } = superForm(deleteFormData, {
+		onSubmit: ({ formData }) => {
+			formData.set('id', todo.id.toString());
+		},
+		invalidateAll: true
+	});
 </script>
 
 <li class="flex card justify-between p-4 items-center">
 	<div class="flex gap-4">
-		<button class="btn" on:click={() => toggleComplete()}>
+		<button class="btn" form="toggleForm">
 			<i class={`${todo.completed ? 'fa-solid' : 'fa-regular'} fa-circle-check text-2xl`}></i>
 		</button>
+
 		<div class={`my-auto`}>
 			<h2 class={`h2 ${todo.completed && 'line-through'}`}>{todo.title}</h2>
 			<p class="text-lg">{todo.content}</p>
 		</div>
 	</div>
-	<button on:click={() => deleteTodo()} class="btn"
-		><i class="fa-solid fa-trash text-xl"></i></button
-	>
+	<button class="btn" form="deleteForm"><i class="fa-solid fa-trash text-xl"></i></button>
 </li>
+<form class="hidden" action="?/toggle" method="post" use:toggleEnhance id="toggleForm"></form>
+<form class="hidden" action="?/delete" method="post" use:deleteEnhance id="deleteForm"></form>

local.db-wal

@@ -0,0 +1,15 @@
+import { z } from 'zod';
+
+export const createSchema = z.object({
+	title: z.string(),
+	content: z.string()
+});
+
+export const toggleSchema = z.object({
+	id: z.number(),
+	state: z.boolean()
+});
+
+export const deleteSchema = z.object({
+	id: z.number()
+});

src/lib/components/Todo.svelte

@@ -1,31 +1,30 @@
 import { db } from '$lib/db/db';
 import { todosTable } from '$lib/db/schema';
-import { desc } from 'drizzle-orm';
+import { desc, eq } from 'drizzle-orm';
 import type { Actions, PageServerLoad } from './$types';
-import { z } from 'zod';
 import { fail, superValidate } from 'sveltekit-superforms';
 import { zod } from 'sveltekit-superforms/adapters';
-
-const schema = z.object({
-	title: z.string(),
-	content: z.string()
-});
+import { createSchema, deleteSchema, toggleSchema } from '$lib/zod';
 
 export const load: PageServerLoad = async ({ depends }) => {
 	depends('query:todos');
 	const todos = await db.select().from(todosTable).orderBy(desc(todosTable.id));
 
-	const form = await superValidate(zod(schema));
+	const createForm = await superValidate(zod(createSchema));
+	const toggleForm = await superValidate(zod(toggleSchema));
+	const deleteForm = await superValidate(zod(deleteSchema));
 
 	return {
 		todos,
-		form
+		createForm,
+		toggleForm,
+		deleteForm
 	};
 };
 
 export const actions = {
-	default: async ({ request }) => {
-		const form = await superValidate(request, zod(schema));
+	create: async ({ request }) => {
+		const form = await superValidate(request, zod(createSchema));
 
 		if (!form.valid) {
 			return fail(400, { form });
@@ -35,5 +34,31 @@ export const actions = {
 			title: form.data.title,
 			content: form.data.content
 		});
+	},
+	toggle: async ({ request }) => {
+		const form = await superValidate(request, zod(toggleSchema));
+
+		if (!form.valid) {
+			return fail(400, { form });
+		}
+
+		await db
+			.update(todosTable)
+			.set({
+				completed: !form.data.state
+			})
+			.where(eq(todosTable.id, form.data.id));
+
+		return { form };
+	},
+	delete: async ({ request }) => {
+		const form = await superValidate(request, zod(toggleSchema));
+
+		if (!form.valid) {
+			return fail(400, { form });
+		}
+
+		await db.delete(todosTable).where(eq(todosTable.id, form.data.id));
+		return { form };
 	}
 } satisfies Actions;

src/lib/zod.ts

@@ -6,7 +6,7 @@
 	export let data;
 	$: todos = data.todos;
 
-	const { form, enhance } = superForm(data.form, {
+	const { form, enhance } = superForm(data.createForm, {
 		onUpdated() {
 			invalidate('query:todos');
 		}
@@ -17,7 +17,7 @@
 	<h1 class="h1 mb-4">
 		Todos{#if todos.length}<span>{' '}({todos.length})</span>{/if}:
 	</h1>
-	<form method="POST" class="mb-4 flex gap-2 text-black" use:enhance>
+	<form method="POST" class="mb-4 flex gap-2 text-black" action="?/create" use:enhance>
 		<input type="text" name="title" placeholder="Title" bind:value={$form.title} />
 		<input
 			type="text"
@@ -29,7 +29,7 @@
 	</form>
 	<ul class="flex flex-col gap-4">
 		{#each todos as todo (todo.id)}
-			<Todo {todo} />
+			<Todo {todo} toggleFormData={data.toggleForm} deleteFormData={data.deleteForm} />
 		{/each}
 	</ul>
 </div>