POST/PUT/DELETE

Author: Rich Harris

content/tutorial/03-sveltekit/05-api-routes/02-post-handlers/README.md

@@ -0,0 +1,87 @@
+---
+title: POST handlers
+---
+
+You can also add handlers that mutate data, such as `POST`. In most cases, you should use [form actions](the-form-element) instead — you'll end up writing less code, and it'll work without JavaScript, making it more resilient.
+
+Inside the `keydown` event handler of the 'add a todo' `<input>`, let's post some data to the server:
+
+```svelte
+/// file: src/routes/+page.svelte
+<input
+	type="text"
+	autocomplete="off"
+	on:keydown={async (e) => {
+		if (e.key === 'Enter') {
+			const input = e.currentTarget;
+			const description = input.value;
+
++++			const response = await fetch('/todo', {
+				method: 'POST',
+				body: JSON.stringify({ description }),
+				headers: {
+					'Content-Type': 'application/json'
+				}
+			});+++
+
+			input.value = '';
+		}
+	}}
+/>
+```
+
+Here, we're posting some JSON to the `/todo` API route — using a `userid` from the user's cookies — and receiving the `id` of the newly created todo in response.
+
+Create the `/todo` route by adding a `src/routes/todo/+server.js` file with a `POST` handler that calls `createTodo` in `src/lib/server/database.js`:
+
+```js
+/// file: src/routes/todo/+server.js
+import { json } from '@sveltejs/kit';
+import * as database from '$lib/server/database.js';
+
+export async function POST({ request, cookies }) {
+	const { description } = await request.json();
+
+	const userid = cookies.get('userid');
+	const { id } = await database.createTodo({ userid, description });
+
+	return json({ id }, { status: 201 });
+}
+```
+
+The `request` is a standard [Request](https://developer.mozilla.org/en-US/docs/Web/API/Request) object; `await request.json()` returns the data that we posted from the event handler.
+
+We're returning a response with a [201 Created](https://httpstatusdogs.com/201-created) status and the `id` of the newly generated todo in our database. Back in the event handler, we can use this to update the page:
+
+```svelte
+/// file: src/routes/+page.svelte
+<input
+	type="text"
+	autocomplete="off"
+	on:keydown={async (e) => {
+		if (e.key === 'Enter') {
+			const input = e.currentTarget;
+			const description = input.value;
+
+			const response = await fetch('/todo', {
+				method: 'POST',
+				body: JSON.stringify({ description }),
+				headers: {
+					'Content-Type': 'application/json'
+				}
+			});
+
++++			const { id } = await response.json();
+
+			data.todos = [...data.todos, {
+				id,
+				description
+			}];+++
+
+			input.value = '';
+		}
+	}}
+/>
+```
+
+> You should only mutate `data` in such a way that you'd get the same result by reloading the page.

content/tutorial/03-sveltekit/05-api-routes/02-post-handlers/app-a/src/lib/server/database.js

@@ -0,0 +1,39 @@
+const database = new Map();
+
+export function getTodos(userid) {
+	if (!database.has(userid)) {
+		createTodo({ userid, description: 'Learn about API routes' });
+	}
+
+	return Array.from(database.get(userid).values());
+}
+
+export function createTodo({ userid, description }) {
+	if (!database.has(userid)) {
+		database.set(userid, new Map());
+	}
+
+	const todos = database.get(userid);
+
+	const id = crypto.randomUUID();
+
+	todos.set(id, {
+		id,
+		description,
+		done: false
+	});
+
+	return {
+		id
+	};
+}
+
+export function toggleTodo({ userid, id, done }) {
+	const todos = database.get(userid);
+	todos.get(id).done = done;
+}
+
+export function deleteTodo({ userid, id }) {
+	const todos = database.get(userid);
+	todos.delete(id);
+}

content/tutorial/03-sveltekit/05-api-routes/02-post-handlers/app-a/src/routes/+page.server.js

@@ -0,0 +1,14 @@
+import * as database from '$lib/server/database.js';
+
+export function load({ cookies }) {
+	let userid = cookies.get('userid');
+
+	if (!userid) {
+		userid = crypto.randomUUID();
+		cookies.set('userid', userid, { path: '/' });
+	}
+
+	return {
+		todos: database.getTodos(userid)
+	};
+}

content/tutorial/03-sveltekit/05-api-routes/02-post-handlers/app-a/src/routes/+page.svelte

@@ -0,0 +1,86 @@
+<script>
+	export let data;
+</script>
+
+<div class="centered">
+	<h1>todos</h1>
+
+	<label>
+		add a todo:
+		<input
+			type="text"
+			autocomplete="off"
+			on:keydown={async (e) => {
+				if (e.key === 'Enter') {
+					const input = e.currentTarget;
+					const description = input.value;
+					
+					// TODO handle submit
+
+					input.value = '';
+				}
+			}}
+		/>
+	</label>
+
+	<ul class="todos">
+		{#each data.todos as todo (todo.id)}
+			<li>
+				<label>
+					<input
+						type="checkbox"
+						checked={todo.done}
+						on:change={async (e) => {
+							const done = e.currentTarget.checked;
+
+							// TODO handle change
+						}}
+					/>
+					<span>{todo.description}</span>
+					<button
+						aria-label="Mark as complete"
+						on:click={async (e) => {
+							// TODO handle delete
+						}}
+					/>
+				</label>
+			</li>
+		{/each}
+	</ul>
+</div>
+
+<style>
+	.centered {
+		max-width: 20em;
+		margin: 0 auto;
+	}
+
+	label {
+		display: flex;
+		width: 100%;
+	}
+
+	input[type="text"] {
+		flex: 1;
+	}
+
+	span {
+		flex: 1;
+	}
+
+	button {
+		border: none;
+		background: url(./remove.svg) no-repeat 50% 50%;
+		background-size: 1rem 1rem;
+		cursor: pointer;
+		height: 100%;
+		aspect-ratio: 1;
+		opacity: 0.5;
+		transition: opacity 0.2s;
+	}
+
+	button:hover {
+		opacity: 1;
+	}
+</style>
+	

content/tutorial/03-sveltekit/05-api-routes/02-post-handlers/app-a/src/routes/remove.svg

@@ -0,0 +1,99 @@
+<script>
+	export let data;
+</script>
+
+<div class="centered">
+	<h1>todos</h1>
+
+	<label>
+		add a todo:
+		<input
+			type="text"
+			autocomplete="off"
+			on:keydown={async (e) => {
+				if (e.key === 'Enter') {
+					const input = e.currentTarget;
+					const description = input.value;
+					
+					const response = await fetch('/todo', {
+						method: 'POST',
+						body: JSON.stringify({ description }),
+						headers: {
+							'Content-Type': 'application/json'
+						}
+					});
+
+					const { id } = await response.json();
+
+					data.todos = [...data.todos, {
+						id,
+						description
+					}];
+
+					input.value = '';
+				}
+			}}
+		/>
+	</label>
+
+	<ul class="todos">
+		{#each data.todos as todo (todo.id)}
+			<li>
+				<label>
+					<input
+						type="checkbox"
+						checked={todo.done}
+						on:change={async (e) => {
+							const done = e.currentTarget.checked;
+
+							// TODO handle change
+						}}
+					/>
+					<span>{todo.description}</span>
+					<button
+						aria-label="Mark as complete"
+						on:click={async (e) => {
+							// TODO handle delete
+						}}
+					/>
+				</label>
+			</li>
+		{/each}
+	</ul>
+</div>
+
+<style>
+	.centered {
+		max-width: 20em;
+		margin: 0 auto;
+	}
+
+	label {
+		display: flex;
+		width: 100%;
+	}
+
+	input[type="text"] {
+		flex: 1;
+	}
+
+	span {
+		flex: 1;
+	}
+
+	button {
+		border: none;
+		background: url(./remove.svg) no-repeat 50% 50%;
+		background-size: 1rem 1rem;
+		cursor: pointer;
+		height: 100%;
+		aspect-ratio: 1;
+		opacity: 0.5;
+		transition: opacity 0.2s;
+	}
+
+	button:hover {
+		opacity: 1;
+	}
+</style>
+	

content/tutorial/03-sveltekit/05-api-routes/02-post-handlers/app-b/src/routes/+page.svelte

@@ -0,0 +1,11 @@
+import { json } from '@sveltejs/kit';
+import * as database from '$lib/server/database.js';
+
+export async function POST({ request, cookies }) {
+	const { description } = await request.json();
+
+	const userid = cookies.get('userid');
+	const { id } = await database.createTodo({ userid, description });
+
+	return json({ id }, { status: 201 });
+}