feat(svelte-5-adapter): require options to be passed as function (#7804)

* fix(svelte-5-adapter): Require options to be passed as function

* More fixes

* More fixes

* 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'}