feat(svelte-query): Improve svelte runes API (#8852)

* feat: Draft proposal

* chore: Improve reactive containers

* ci: apply automated fixes

* oops

* fix: Update API, add a bunch of tests

* merge main

* fix: use const

* more tests

* feat: More tests, back to thunks, fixed svelte-query-persist-client

* feat: More tests and examples!

* lockfile

* fixes

* Fix current CI errors

* More small fixes/tweaks

* Remove test.only

* ci: apply automated fixes

* Fix pnpm-lock, fix import order

* update main docs

* feat: More tests

* ci: apply automated fixes

* add back old tests

* Cleanup

* Fix persist client

* Fix useMutationState

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: Lachlan Collins <1667261+lachlancollins@users.noreply.github.com>

Author: 3 people

docs/config.json

@@ -127,10 +127,6 @@
             {
               "label": "SSR & SvelteKit",
               "to": "framework/svelte/ssr"
-            },
-            {
-              "label": "Reactivity",
-              "to": "framework/svelte/reactivity"
             }
           ]
         },

docs/framework/svelte/installation.md

@@ -5,8 +5,6 @@ title: Installation
 
 You can install Svelte Query via [NPM](https://npmjs.com).
 
-> v5 is currently available as a release-candidate. We don't anticipate any major API changes from here on out. We encourage you to try it out and report any issues you find.
-
 ### NPM
 
 ```bash

docs/framework/svelte/overview.md

@@ -28,19 +28,19 @@ Then call any function (e.g. createQuery) from any component:
 <script lang="ts">
   import { createQuery } from '@tanstack/svelte-query'
 
-  const query = createQuery({
+  const query = createQuery(() => ({
     queryKey: ['todos'],
     queryFn: () => fetchTodos(),
-  })
+  }))
 </script>
 
 <div>
-  {#if $query.isLoading}
+  {#if query.isLoading}
     <p>Loading...</p>
-  {:else if $query.isError}
-    <p>Error: {$query.error.message}</p>
-  {:else if $query.isSuccess}
-    {#each $query.data as todo}
+  {:else if query.isError}
+    <p>Error: {query.error.message}</p>
+  {:else if query.isSuccess}
+    {#each query.data as todo}
       <p>{todo.title}</p>
     {/each}
   {/if}
@@ -62,6 +62,8 @@ Svelte Query offers useful functions and components that will make managing serv
 - `useQueryClient`
 - `useIsFetching`
 - `useIsMutating`
+- `useMutationState`
+- `useIsRestoring`
 - `useHydrate`
 - `<QueryClientProvider>`
 - `<HydrationBoundary>`
@@ -70,5 +72,4 @@ Svelte Query offers useful functions and components that will make managing serv
 
 Svelte Query offers an API similar to React Query, but there are some key differences to be mindful of.
 
-- Many of the functions in Svelte Query return a Svelte store. To access values on these stores reactively, you need to prefix the store with a `$`. You can learn more about Svelte stores [here](https://learn.svelte.dev/tutorial/writable-stores).
-- If your query or mutation depends on variables, you must use a store for the options. You can read more about this [here](../reactivity).
+- The arguments to the `create*` functions must be wrapped in a function to preserve reactivity.

docs/framework/svelte/reactivity.md

@@ -58,11 +58,11 @@ export async function load() {
 
   export let data: PageData
 
-  const query = createQuery({
+  const query = createQuery(() => ({
     queryKey: ['posts'],
     queryFn: getPosts,
     initialData: data.posts,
-  })
+  }))
 </script>
 ```
 
@@ -136,10 +136,10 @@ export async function load({ parent, fetch }) {
   import { createQuery } from '@tanstack/svelte-query'
 
   // This data is cached by prefetchQuery in +page.ts so no fetch actually happens here
-  const query = createQuery({
+  const query = createQuery(() => ({
     queryKey: ['posts'],
     queryFn: async () => (await fetch('/api/posts')).json(),
-  })
+  }))
 </script>
 ```
 

docs/framework/svelte/ssr.md

@@ -88,14 +88,22 @@
     <button onclick={() => clearMutation.mutate(undefined)}> Clear All </button>
   </div>
 {/if}
-{#if todos.isFetching}
-  <div style="color:darkgreen; font-weight:700">
-    'Background Updating...' : ' '
-  </div>
-{/if}
+
+<pre
+  class={['updating-text', todos.isFetching && 'on']}
+  style="font-weight:700">Background Updating...</pre>
 
 <style>
   li {
     text-align: left;
   }
+
+  .updating-text {
+    color: transparent;
+    transition: all 0.3s ease;
+  }
+  .updating-text.on {
+    color: green;
+    transition: none;
+  }
 </style>

examples/svelte/auto-refetching/src/routes/+page.svelte

@@ -38,11 +38,9 @@
           </article>
         {/each}
       </ul>
-      {#if posts.isFetching}
-        <div style="color:darkgreen; font-weight:700">
-          Background Updating...
-        </div>
-      {/if}
+      <pre
+        class={['updating-text', posts.isFetching && 'on']}
+        style="font-weight:700">Background Updating...</pre>
     {/if}
   </div>
 </div>
@@ -53,8 +51,16 @@
   }
   a {
     display: block;
-    color: white;
     font-size: 1.5rem;
     margin-bottom: 1rem;
   }
+
+  .updating-text {
+    color: transparent;
+    transition: all 0.3s ease;
+  }
+  .updating-text.on {
+    color: green;
+    transition: none;
+  }
 </style>

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

@@ -60,5 +60,6 @@
   .card {
     background-color: #111;
     margin-bottom: 1rem;
+    color: rgba(255, 255, 255, 0.87);
   }
 </style>

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

@@ -14,7 +14,6 @@
   let name = $state('')
 
   const postTodo = async ({ name, notes }: Omit<Todo, 'id'>) => {
-    console.info('postTodo', { name, notes })
     return new Promise((resolve, reject) => {
       setTimeout(
         () => {
@@ -31,7 +30,7 @@
           }
           const todo = { name, notes, id: id.value }
           id.value = id.value + 1
-          list.value = [...list.value, todo]
+          list.value.push(todo)
           resolve(todo)
         },
         queryTimeMin.value +

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

@@ -26,7 +26,7 @@
 
   <button
     onclick={() => {
-      views.value = [...views.value, '']
+      views.value.push('')
     }}
   >
     Add Filter List