Fix: SvelteKit post-handlers tutorial (#1085)

* Fix tutorial to work with immutable data prop * Remove extraneous $bindable rune on data prop * Update apps/svelte.dev/content/tutorial/03-sveltekit/07-api-routes/02-post-handlers/index.md --------- Co-authored-by: Rich Harris <[email protected]> Co-authored-by: Rich Harris <[email protected]>
sveltejs · Jan 6, 2025 · 5c49543 · 5c49543
1 parent 375fa3b
commit 5c49543
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 5 deletions.
diff --git a/...utorial/03-sveltekit/07-api-routes/02-post-handlers/+assets/app-b/src/routes/+page.svelte b/...utorial/03-sveltekit/07-api-routes/02-post-handlers/+assets/app-b/src/routes/+page.svelte
@@ -1,5 +1,5 @@
 <script>
-	let { data = $bindable() } = $props();
+	let { data } = $props();
 </script>
 
 <div class="centered">
@@ -26,11 +26,13 @@
 
 				const { id } = await response.json();
 
-				data.todos = [...data.todos, {
+				const todos = [...data.todos, {
 					id,
 					description
 				}];
 
+				data = { ...data, todos };
+
 				input.value = '';
 			}}
 		/>

diff --git a/...velte.dev/content/tutorial/03-sveltekit/07-api-routes/02-post-handlers/index.md b/...velte.dev/content/tutorial/03-sveltekit/07-api-routes/02-post-handlers/index.md
@@ -74,14 +74,16 @@ We're returning a response with a [201 Created](https://http.dog/201) status and
 
 +++		const { id } = await response.json();
 
-		data.todos = [...data.todos, {
+		const todos = [...data.todos, {
 			id,
 			description
-		}];+++
+		}];
+
+		data = { ...data, todos };+++
 
 		input.value = '';
 	}}
 />
 ```
 
-> [!NOTE] You should only mutate `data` in such a way that you'd get the same result by reloading the page.
+> [!NOTE] You should only update `data` in such a way that you'd get the same result by reloading the page. The `data` prop is not _deeply_ reactive, so you need to replace it — mutations like `data.todos = todos` will not cause a re-render.