Update examples

Author: lachlancollins

examples/svelte/basic/src/lib/Post.svelte

@@ -5,10 +5,10 @@
 
   const { postId }: { postId: number } = $props()
 
-  const post = createQuery<Post>({
+  const post = createQuery<Post>(() => ({
     queryKey: ['post', postId],
     queryFn: () => getPostById(postId),
-  })
+  }))
 </script>
 
 <div>

examples/svelte/basic/src/lib/Posts.svelte

@@ -9,10 +9,10 @@
   const posts = createQuery<
     { id: number; title: string; body: string }[],
     Error
-  >({
+  >(() => ({
     queryKey: ['posts', limit],
     queryFn: () => getPosts(limit),
-  })
+  }))
 </script>
 
 <div>

examples/svelte/load-more-infinite-scroll/src/lib/LoadMore.svelte

@@ -6,7 +6,7 @@
   const fetchPlanets = async ({ pageParam = 1 }) =>
     await fetch(`${endPoint}/planets/?page=${pageParam}`).then((r) => r.json())
 
-  const query = createInfiniteQuery({
+  const query = createInfiniteQuery(() => ({
     queryKey: ['planets'],
     queryFn: ({ pageParam }) => fetchPlanets({ pageParam }),
     initialPageParam: 1,
@@ -20,7 +20,7 @@
       }
       return undefined
     },
-  })
+  }))
 </script>
 
 {#if query.isPending}

examples/svelte/optimistic-updates/src/routes/+page.svelte

@@ -36,10 +36,10 @@
       }),
     }).then((res) => res.json())
 
-  const todos = createQuery<Todos>({
+  const todos = createQuery<Todos>(() => ({
     queryKey: ['optimistic'],
     queryFn: fetchTodos,
-  })
+  }))
 
   const addTodoMutation = createMutation({
     mutationFn: createTodo,

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

@@ -20,7 +20,13 @@
         () => {
           if (Math.random() < errorRate.value) {
             return reject(
-              new Error(JSON.stringify({ postTodo: { name, notes } }, null, 2)),
+              new Error(
+                JSON.stringify(
+                  { postTodo: { name: $state.snapshot(name), notes } },
+                  null,
+                  2,
+                ),
+              ),
             )
           }
           const todo = { name, notes, id: id.value }

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

@@ -55,7 +55,7 @@
           }
           list.value = list.value.map((d) => {
             if (d.id === todo.id) {
-              return todo
+              return $state.snapshot(todo)
             }
             return d
           })
@@ -67,11 +67,11 @@
     })
   }
 
-  const query = createQuery({
+  const query = createQuery(() => ({
     queryKey: ['todo', { id: editingIndex.value }],
     queryFn: () => fetchTodoById({ id: editingIndex.value || 0 }),
     enabled: editingIndex.value !== null,
-  })
+  }))
 
   const saveMutation = createMutation({
     mutationFn: patchTodo,

examples/svelte/simple/src/lib/Simple.svelte

@@ -9,13 +9,13 @@
     forks_count: number
   }
 
-  const query = createQuery<Repo>({
+  const query = createQuery<Repo>(() => ({
     queryKey: ['repoData'],
     queryFn: async () =>
       await fetch('https://api.github.com/repos/TanStack/query').then((r) =>
         r.json(),
       ),
-  })
+  }))
 </script>
 
 <h1>Simple</h1>

examples/svelte/ssr/src/lib/Post.svelte

@@ -5,10 +5,10 @@
 
   const { postId }: { postId: number } = $props()
 
-  const post = createQuery<Post>({
+  const post = createQuery<Post>(() => ({
     queryKey: ['post', postId],
     queryFn: () => api().getPostById(postId),
-  })
+  }))
 </script>
 
 <div>

examples/svelte/ssr/src/lib/Posts.svelte

@@ -9,10 +9,10 @@
   const posts = createQuery<
     { id: number; title: string; body: string }[],
     Error
-  >({
+  >(() => ({
     queryKey: ['posts', limit],
     queryFn: () => api().getPosts(limit),
-  })
+  }))
 </script>
 
 <div>

examples/svelte/star-wars/src/routes/characters/+page.svelte

@@ -6,10 +6,10 @@
     return await res.json()
   }
 
-  const query = createQuery({
+  const query = createQuery(() => ({
     queryKey: ['characters'],
     queryFn: getCharacters,
-  })
+  }))
 </script>
 
 {#if query.status === 'pending'}

examples/svelte/star-wars/src/routes/characters/[characterId]/+page.svelte

@@ -12,10 +12,10 @@
     return await res.json()
   }
 
-  const query = createQuery({
+  const query = createQuery(() => ({
     queryKey: ['character', data.params.characterId],
     queryFn: getCharacter,
-  })
+  }))
 </script>
 
 {#if query.status === 'pending'}

examples/svelte/star-wars/src/routes/characters/[characterId]/Film.svelte

@@ -8,10 +8,10 @@
     return await res.json()
   }
 
-  const query = createQuery({
+  const query = createQuery(() => ({
     queryKey: ['film', filmId],
     queryFn: getFilm,
-  })
+  }))
 </script>
 
 {#if query.status === 'success'}

examples/svelte/star-wars/src/routes/characters/[characterId]/Homeworld.svelte

@@ -8,10 +8,10 @@
     return await res.json()
   }
 
-  const query = createQuery({
+  const query = createQuery(() => ({
     queryKey: ['homeworld', homeworldId],
     queryFn: getHomeworld,
-  })
+  }))
 </script>
 
 {#if query.status === 'success'}

examples/svelte/star-wars/src/routes/films/+page.svelte

@@ -6,10 +6,10 @@
     return await res.json()
   }
 
-  const query = createQuery({
+  const query = createQuery(() => ({
     queryKey: ['films'],
     queryFn: getFilms,
-  })
+  }))
 </script>
 
 {#if query.status === 'pending'}

examples/svelte/star-wars/src/routes/films/[filmId]/+page.svelte

@@ -11,10 +11,10 @@
     return await res.json()
   }
 
-  const query = createQuery({
+  const query = createQuery(() => ({
     queryKey: ['film', data.params.filmId],
     queryFn: getFilm,
-  })
+  }))
 </script>
 
 {#if query.status === 'pending'}

examples/svelte/star-wars/src/routes/films/[filmId]/Character.svelte

@@ -8,10 +8,10 @@
     return await res.json()
   }
 
-  const query = createQuery({
+  const query = createQuery(() => ({
     queryKey: ['character', characterId],
     queryFn: getCharacter,
-  })
+  }))
 </script>
 
 {#if query.status === 'success'}

packages/svelte-query-persist-client/tests/AwaitOnSuccess/AwaitOnSuccess.svelte

@@ -4,15 +4,15 @@
 
   let { states }: { states: Array<string> } = $props()
 
-  const query = createQuery({
+  const query = createQuery(() => ({
     queryKey: ['test'],
     queryFn: async () => {
       states.push('fetching')
       await sleep(5)
       states.push('fetched')
       return 'fetched'
     },
-  })
+  }))
 </script>
 
 <div>{query.data}</div>

packages/svelte-query-persist-client/tests/FreshData/FreshData.svelte

@@ -12,7 +12,7 @@
     fetched: boolean
   } = $props()
 
-  const query = createQuery({
+  const query = createQuery(() => ({
     queryKey: ['test'],
     queryFn: async () => {
       fetched = true
@@ -21,7 +21,7 @@
     },
 
     staleTime: Infinity,
-  })
+  }))
 
   $effect(() => {
     states.value = [...untrack(() => states.value), $state.snapshot(query)]

packages/svelte-query-persist-client/tests/InitialData/InitialData.svelte

@@ -6,7 +6,7 @@
 
   let { states }: { states: { value: Array<StatusResult<string>> } } = $props()
 
-  const query = createQuery({
+  const query = createQuery(() => ({
     queryKey: ['test'],
     queryFn: async () => {
       await sleep(5)
@@ -17,7 +17,7 @@
     // make sure that initial data is older than the hydration data
     // otherwise initialData would be newer and takes precedence
     initialDataUpdatedAt: 1,
-  })
+  }))
 
   $effect(() => {
     states.value = [...untrack(() => states.value), $state.snapshot(query)]

packages/svelte-query-persist-client/tests/OnSuccess/OnSuccess.svelte

@@ -2,13 +2,13 @@
   import { createQuery } from '@tanstack/svelte-query'
   import { sleep } from '../utils.svelte'
 
-  const query = createQuery({
+  const query = createQuery(() => ({
     queryKey: ['test'],
     queryFn: async () => {
       await sleep(5)
       return 'fetched'
     },
-  })
+  }))
 </script>
 
 <div>{query.data}</div>

packages/svelte-query-persist-client/tests/RemoveCache/RemoveCache.svelte

@@ -2,13 +2,13 @@
   import { createQuery } from '@tanstack/svelte-query'
   import { sleep } from '../utils.svelte'
 
-  const query = createQuery({
+  const query = createQuery(() => ({
     queryKey: ['test'],
     queryFn: async () => {
       await sleep(5)
       return 'fetched'
     },
-  })
+  }))
 </script>
 
 <div>{query.data}</div>

packages/svelte-query-persist-client/tests/RestoreCache/RestoreCache.svelte

@@ -6,13 +6,13 @@
 
   let { states }: { states: { value: Array<StatusResult<string>> } } = $props()
 
-  const query = createQuery({
+  const query = createQuery(() => ({
     queryKey: ['test'],
     queryFn: async () => {
       await sleep(5)
       return 'fetched'
     },
-  })
+  }))
 
   $effect(() => {
     states.value = [...untrack(() => states.value), $state.snapshot(query)]

packages/svelte-query-persist-client/tests/UseQueries/UseQueries.svelte

@@ -7,7 +7,7 @@
   let { states }: { states: { value: Array<StatusResult<string>> } } = $props()
 
   const queries = createQueries({
-    queries: [
+    queries: () => [
       {
         queryKey: ['test'],
         queryFn: async (): Promise<string> => {