docs: Fix svelte playground example reactivity (#6311)

* docs: Fix svelte playground example reactivity

* Rename next-js-app to react-next

* Update pnpm lock

* Fix prettier

Author: lachlancollins

examples/svelte/playground/src/lib/stores.ts

@@ -21,3 +21,6 @@ const initialList = [
 
 export const list = writable(initialList)
 export const id = writable(initialId)
+
+export type Todos = typeof initialList
+export type Todo = Todos[0]

examples/svelte/playground/src/routes/AddTodo.svelte

@@ -6,13 +6,14 @@
     queryTimeMax,
     list,
     id,
+    type Todo,
   } from '../lib/stores'
 
   const queryClient = useQueryClient()
 
   let name = ''
 
-  const postTodo = async ({ name, notes }: { name: string; notes: string }) => {
+  const postTodo = async ({ name, notes }: Omit<Todo, 'id'>) => {
     console.info('postTodo', { name, notes })
     return new Promise((resolve, reject) => {
       setTimeout(() => {

examples/svelte/playground/src/routes/App.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { useQueryClient } from '@tanstack/svelte-query'
-  import Todos from './Todos.svelte'
+  import TodosList from './TodosList.svelte'
   import EditTodo from './EditTodo.svelte'
   import AddTodo from './AddTodo.svelte'
   import { views, editingIndex } from '../lib/stores'
@@ -19,7 +19,7 @@
 
   {#each $views as view}
     <div>
-      <Todos initialFilter={view} />
+      <TodosList initialFilter={view} />
       <br />
     </div>
   {/each}

examples/svelte/playground/src/routes/EditTodo.svelte

@@ -10,9 +10,9 @@
     queryTimeMax,
     list,
     editingIndex,
-  } from '../lib/stores'
-
-  type Todo = { id: number; name: string; notes: string }
+    type Todo,
+  } from '$lib/stores'
+  import { derived } from 'svelte/store'
 
   const queryClient = useQueryClient()
 
@@ -59,11 +59,13 @@
     })
   }
 
-  const query = createQuery({
-    queryKey: ['todo', { id: $editingIndex }],
-    queryFn: () => fetchTodoById({ id: $editingIndex || 0 }),
-    enabled: $editingIndex !== null,
-  })
+  const query = createQuery(
+    derived(editingIndex, ($editingIndex) => ({
+      queryKey: ['todo', { id: $editingIndex }],
+      queryFn: () => fetchTodoById({ id: $editingIndex || 0 }),
+      enabled: $editingIndex !== null,
+    })),
+  )
 
   const saveMutation = createMutation({
     mutationFn: patchTodo,

examples/svelte/playground/src/routes/Todos.svelte renamed to examples/svelte/playground/src/routes/TodosList.svelte

@@ -6,15 +6,15 @@
     queryTimeMax,
     list,
     editingIndex,
-  } from '../lib/stores'
+    type Todos,
+  } from '$lib/stores'
+  import { derived, writable } from 'svelte/store'
 
   export let initialFilter: string
 
-  let filter = initialFilter
-
-  const fetchTodos = async ({ filter }: { filter: string }) => {
-    console.info('fetchTodos', { filter })
+  let filter = writable(initialFilter)
 
+  const fetchTodos = async ({ filter }: { filter: string }): Promise<Todos> => {
     return new Promise((resolve, reject) => {
       setTimeout(() => {
         if (Math.random() < $errorRate) {
@@ -27,16 +27,18 @@
     })
   }
 
-  const query = createQuery<any>({
-    queryKey: ['todos', { filter }],
-    queryFn: () => fetchTodos({ filter }),
-  })
+  const query = createQuery(
+    derived(filter, ($filter) => ({
+      queryKey: ['todos', { filter: $filter }],
+      queryFn: () => fetchTodos({ filter: $filter }),
+    })),
+  )
 </script>
 
 <div>
   <label>
     Filter:{' '}
-    <input bind:value={filter} />
+    <input bind:value={$filter} />
   </label>
 </div>