feat: Svelte 5 API proposal

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

@@ -10,7 +10,7 @@
 
   const client = useQueryClient()
 
-  const endpoint = 'http://localhost:5173/api/data'
+  const endpoint = '/api/data'
 
   const todos = createQuery<{ items: string[] }>(() => ({
     queryKey: ['refetch'],
@@ -21,7 +21,9 @@
 
   const addMutation = createMutation(() => ({
     mutationFn: (value: string) =>
-      fetch(`${endpoint}?add=${value}`).then((r) => r.json()),
+      fetch(`${endpoint}?add=${encodeURIComponent(value)}`).then((r) =>
+        r.json(),
+      ),
     onSuccess: () => client.invalidateQueries({ queryKey: ['refetch'] }),
   }))
 
@@ -31,7 +33,7 @@
   }))
 </script>
 
-<h1>Auto Refetch with stale-time set to 1s</h1>
+<h1>Auto Refetch with stale-time set to {(intervalMs / 1000).toFixed(2)}s</h1>
 
 <p>
   This example is best experienced on your own machine, where you can open
@@ -86,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/basic/src/lib/Posts.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/load-more-infinite-scroll/src/lib/LoadMore.svelte

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

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

@@ -20,7 +20,7 @@
 
   const client = useQueryClient()
 
-  const endpoint = 'http://localhost:5173/api/data'
+  const endpoint = '/api/data'
 
   const fetchTodos = async (): Promise<Todos> =>
     await fetch(endpoint).then((r) => r.json())

examples/svelte/optimistic-updates/src/routes/api/data/+server.ts

@@ -6,7 +6,7 @@ type Todo = {
   text: string
 }
 
-const items: Todo[] = []
+const items: Array<Todo> = []
 
 /** @type {import('./$types').RequestHandler} */
 export const GET: RequestHandler = async (req) => {

examples/svelte/playground/src/routes/AddTodo.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/App.svelte

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

examples/svelte/ssr/src/lib/Posts.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,15 @@
   }
   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/ssr/src/routes/+layout.ts

@@ -1,6 +1,6 @@
-import { browser } from '$app/environment'
 import { QueryClient } from '@tanstack/svelte-query'
 import type { LayoutLoad } from './$types'
+import { browser } from '$app/environment'
 
 export const load: LayoutLoad = () => {
   const queryClient = new QueryClient({

examples/svelte/ssr/src/routes/+page.ts

@@ -1,5 +1,5 @@
-import { api } from '$lib/api'
 import type { PageLoad } from './$types'
+import { api } from '$lib/api'
 
 export const load: PageLoad = async ({ parent, fetch }) => {
   const { queryClient } = await parent()

examples/svelte/ssr/src/routes/[postId]/+page.ts

@@ -1,5 +1,5 @@
-import { api } from '$lib/api'
 import type { PageLoad } from './$types'
+import { api } from '$lib/api'
 
 export const load: PageLoad = async ({ parent, fetch, params }) => {
   const { queryClient } = await parent()

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

@@ -2,8 +2,7 @@
   <h2 class="text-4xl">React Query Demo</h2>
   <p>Using the Star Wars API</p>
   <p>
-    (Built by <a href="https://twitter.com/Brent_m_Clark">@Brent_m_Clark</a>
-    )
+    (Built by <a href="https://twitter.com/Brent_m_Clark">@Brent_m_Clark</a>)
   </p>
   <section>
     <h5 class="text-2xl">Why React Query?</h5>

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

@@ -2,18 +2,17 @@
   import { createQuery } from '@tanstack/svelte-query'
   import Homeworld from './Homeworld.svelte'
   import Film from './Film.svelte'
-
-  let { data } = $props()
+  import { page } from '$app/state'
 
   const getCharacter = async () => {
     const res = await fetch(
-      `https://swapi.dev/api/people/${data.params.characterId}/`,
+      `https://swapi.dev/api/people/${page.params.characterId}/`,
     )
     return await res.json()
   }
 
   const query = createQuery(() => ({
-    queryKey: ['character', data.params.characterId],
+    queryKey: ['character', page.params.characterId],
     queryFn: getCharacter,
   }))
 </script>

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

@@ -1,18 +1,17 @@
 <script lang="ts">
   import { createQuery } from '@tanstack/svelte-query'
   import Character from './Character.svelte'
-
-  let { data } = $props()
+  import { page } from '$app/state'
 
   const getFilm = async () => {
     const res = await fetch(
-      `https://swapi.dev/api/films/${data.params.filmId}/`,
+      `https://swapi.dev/api/films/${page.params.filmId}/`,
     )
     return await res.json()
   }
 
   const query = createQuery(() => ({
-    queryKey: ['film', data.params.filmId],
+    queryKey: ['film', page.params.filmId],
     queryFn: getFilm,
   }))
 </script>

packages/svelte-query-persist-client/package.json

@@ -19,8 +19,8 @@
     "compile": "tsc --build",
     "test:types": "svelte-check --tsconfig ./tsconfig.json",
     "test:eslint": "eslint ./src",
-    "test:lib": "vitest",
-    "test:lib:dev": "pnpm run test:lib --watch",
+    "test:lib": "vitest run",
+    "test:lib:dev": "vitest",
     "test:build": "publint --strict && attw --pack",
     "build": "svelte-package --input ./src --output ./dist"
   },

packages/svelte-query-persist-client/src/PersistQueryClientProvider.svelte

@@ -7,6 +7,7 @@
     QueryClientProvider,
     setIsRestoringContext,
   } from '@tanstack/svelte-query'
+  import { box } from './utils.svelte.js'
   import type { PersistQueryClientOptions } from '@tanstack/query-persist-client-core'
   import type {
     OmitKeyof,
@@ -26,9 +27,9 @@
     ...props
   }: PersistQueryClientProviderProps = $props()
 
-  let isRestoring = $state(true)
+  let isRestoring = box(true)
 
-  setIsRestoringContext(() => isRestoring)
+  setIsRestoringContext(isRestoring)
 
   const options = $derived({
     ...persistOptions,
@@ -40,12 +41,12 @@
   })
 
   $effect(() => {
-    isRestoring = true
+    isRestoring.current = true
     persistQueryClientRestore(options)
       .then(() => props.onSuccess?.())
       .catch(() => props.onError?.())
       .finally(() => {
-        isRestoring = false
+        isRestoring.current = false
       })
   })
 </script>

packages/svelte-query-persist-client/src/utils.svelte.ts

@@ -0,0 +1,14 @@
+type Box<T> = { current: T }
+
+export function box<T>(initial: T): Box<T> {
+  let current = $state(initial)
+
+  return {
+    get current() {
+      return current
+    },
+    set current(newValue) {
+      current = newValue
+    },
+  }
+}

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

@@ -1,15 +1,15 @@
 <script lang="ts">
   import { createQuery } from '@tanstack/svelte-query'
-  import { sleep } from '../utils.svelte.js'
+  import { sleep, StatelessRef } from '../utils.svelte.js'
 
-  let { states }: { states: Array<string> } = $props()
+  let { states }: { states: StatelessRef<Array<string>> } = $props()
 
   const query = createQuery(() => ({
     queryKey: ['test'],
     queryFn: async () => {
-      states.push('fetching')
+      states.current.push('fetching')
       await sleep(5)
-      states.push('fetched')
+      states.current.push('fetched')
       return 'fetched'
     },
   }))

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

@@ -3,12 +3,13 @@
   import AwaitOnSuccess from './AwaitOnSuccess.svelte'
   import type { OmitKeyof, QueryClient } from '@tanstack/svelte-query'
   import type { PersistQueryClientOptions } from '@tanstack/query-persist-client-core'
+  import { StatelessRef } from '../utils.svelte'
 
   interface Props {
     queryClient: QueryClient
     persistOptions: OmitKeyof<PersistQueryClientOptions, 'queryClient'>
     onSuccess: () => Promise<void>
-    states: Array<string>
+    states: StatelessRef<Array<string>>
   }
 
   let { queryClient, persistOptions, onSuccess, states }: Props = $props()

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

@@ -1,34 +1,26 @@
 <script lang="ts">
-  import { untrack } from 'svelte'
   import { createQuery } from '@tanstack/svelte-query'
-  import { sleep } from '../utils.svelte.js'
-  import type { StatusResult } from '../utils.svelte.js'
+  import type { StatelessRef, StatusResult } from '../utils.svelte.js'
 
   let {
     states,
-    fetched,
   }: {
-    states: { value: Array<StatusResult<string>> }
-    fetched: boolean
+    states: StatelessRef<Array<StatusResult<string>>>
   } = $props()
 
   const query = createQuery(() => ({
     queryKey: ['test'],
-    queryFn: async () => {
-      fetched = true
-      await sleep(5)
-      return 'fetched'
-    },
+    queryFn: () => Promise.resolve('fetched'),
 
     staleTime: Infinity,
   }))
 
   $effect(() => {
     // svelte-ignore state_snapshot_uncloneable
-    states.value = [...untrack(() => states.value), $state.snapshot(query)]
+    const snapshot = $state.snapshot(query)
+    states.current.push(snapshot)
   })
 </script>
 
 <div>data: {query.data ?? 'undefined'}</div>
 <div>fetchStatus: {query.fetchStatus}</div>
-<div>fetched: {fetched}</div>