fix(svelte-query): state_unsafe_mutation error with useIs...

packages/svelte-query/src/containers.svelte.ts

@@ -1,4 +1,4 @@
-import { createSubscriber } from 'svelte/reactivity'
+import { SvelteSet, createSubscriber } from 'svelte/reactivity'
 
 type VoidFn = () => void
 type Subscriber = (update: VoidFn) => void | VoidFn
@@ -30,7 +30,7 @@ export function createRawRef<T extends {} | Array<unknown>>(
   init: T,
 ): [T, (newValue: T) => void] {
   const refObj = (Array.isArray(init) ? [] : {}) as T
-  const hiddenKeys = new Set<PropertyKey>()
+  const hiddenKeys = new SvelteSet<PropertyKey>()
   const out = new Proxy(refObj, {
     set(target, prop, value, receiver) {
       hiddenKeys.delete(prop)

packages/svelte-query/src/createBaseQuery.svelte.ts

@@ -1,7 +1,7 @@
-import { untrack } from 'svelte'
 import { useIsRestoring } from './useIsRestoring.js'
 import { useQueryClient } from './useQueryClient.js'
 import { createRawRef } from './containers.svelte.js'
+import { watchChanges } from './utils.svelte.js'
 import type { QueryClient, QueryKey, QueryObserver } from '@tanstack/query-core'
 import type {
   Accessor,
@@ -39,12 +39,26 @@ export function createBaseQuery<
   })
 
   /** Creates the observer */
-  const observer = $derived(
+  // svelte-ignore state_referenced_locally - intentional, initial value
+  let observer = $state(
     new Observer<TQueryFnData, TError, TData, TQueryData, TQueryKey>(
       client,
-      untrack(() => resolvedOptions),
+      resolvedOptions,
     ),
   )
+  watchChanges(
+    () => client,
+    'pre',
+    () => {
+      observer = new Observer<
+        TQueryFnData,
+        TError,
+        TData,
+        TQueryData,
+        TQueryKey
+      >(client, resolvedOptions)
+    },
+  )
 
   function createResult() {
     const result = observer.getOptimisticResult(resolvedOptions)
@@ -65,19 +79,29 @@ export function createBaseQuery<
     return unsubscribe
   })
 
-  $effect.pre(() => {
-    observer.setOptions(resolvedOptions)
-    // The only reason this is necessary is because of `isRestoring`.
-    // Because we don't subscribe while restoring, the following can occur:
-    // - `isRestoring` is true
-    // - `isRestoring` becomes false
-    // - `observer.subscribe` and `observer.updateResult` is called in the above effect,
-    //   but the subsequent `fetch` has already completed
-    // - `result` misses the intermediate restored-but-not-fetched state
-    //
-    // this could technically be its own effect but that doesn't seem necessary
-    update(createResult())
-  })
+  watchChanges(
+    () => resolvedOptions,
+    'pre',
+    () => {
+      observer.setOptions(resolvedOptions)
+    },
+  )
+  watchChanges(
+    () => [resolvedOptions, observer],
+    'pre',
+    () => {
+      // The only reason this is necessary is because of `isRestoring`.
+      // Because we don't subscribe while restoring, the following can occur:
+      // - `isRestoring` is true
+      // - `isRestoring` becomes false
+      // - `observer.subscribe` and `observer.updateResult` is called in the above effect,
+      //   but the subsequent `fetch` has already completed
+      // - `result` misses the intermediate restored-but-not-fetched state
+      //
+      // this could technically be its own effect but that doesn't seem necessary
+      update(createResult())
+    },
+  )
 
   return query
 }

packages/svelte-query/src/createMutation.svelte.ts

@@ -1,7 +1,6 @@
-import { onDestroy } from 'svelte'
-
 import { MutationObserver, noop, notifyManager } from '@tanstack/query-core'
 import { useQueryClient } from './useQueryClient.js'
+import { watchChanges } from './utils.svelte.js'
 import type {
   Accessor,
   CreateMutateFunction,
@@ -24,48 +23,62 @@ export function createMutation<
   options: Accessor<CreateMutationOptions<TData, TError, TVariables, TContext>>,
   queryClient?: Accessor<QueryClient>,
 ): CreateMutationResult<TData, TError, TVariables, TContext> {
-  const client = useQueryClient(queryClient?.())
+  const client = $derived(useQueryClient(queryClient?.()))
 
-  const observer = $derived(
+  // svelte-ignore state_referenced_locally - intentional, initial value
+  let observer = $state(
+    // svelte-ignore state_referenced_locally - intentional, initial value
     new MutationObserver<TData, TError, TVariables, TContext>(
       client,
       options(),
     ),
   )
 
-  const mutate = $state<
-    CreateMutateFunction<TData, TError, TVariables, TContext>
-  >((variables, mutateOptions) => {
-    observer.mutate(variables, mutateOptions).catch(noop)
-  })
+  watchChanges(
+    () => client,
+    'pre',
+    () => {
+      observer = new MutationObserver(client, options())
+    },
+  )
 
   $effect.pre(() => {
     observer.setOptions(options())
   })
 
-  const result = $state(observer.getCurrentResult())
-
-  const unsubscribe = observer.subscribe((val) => {
-    notifyManager.batchCalls(() => {
-      Object.assign(result, val)
-    })()
+  const mutate = <CreateMutateFunction<TData, TError, TVariables, TContext>>((
+    variables,
+    mutateOptions,
+  ) => {
+    observer.mutate(variables, mutateOptions).catch(noop)
   })
 
-  onDestroy(() => {
-    unsubscribe()
+  let result = $derived(observer.getCurrentResult())
+
+  $effect.pre(() => {
+    const unsubscribe = observer.subscribe((val) => {
+      notifyManager.batchCalls(() => {
+        Object.assign(result, val)
+      })()
+    })
+    return unsubscribe
   })
 
+  const resultProxy = $derived(
+    new Proxy(result, {
+      get: (_, prop) => {
+        const r = {
+          ...result,
+          mutate,
+          mutateAsync: result.mutate,
+        }
+        if (prop == 'value') return r
+        // @ts-expect-error
+        return r[prop]
+      },
+    }),
+  )
+
   // @ts-expect-error
-  return new Proxy(result, {
-    get: (_, prop) => {
-      const r = {
-        ...result,
-        mutate,
-        mutateAsync: result.mutate,
-      }
-      if (prop == 'value') return r
-      // @ts-expect-error
-      return r[prop]
-    },
-  })
+  return resultProxy
 }

packages/svelte-query/src/createQueries.svelte.ts

@@ -1,5 +1,4 @@
 import { QueriesObserver } from '@tanstack/query-core'
-import { untrack } from 'svelte'
 import { useIsRestoring } from './useIsRestoring.js'
 import { createRawRef } from './containers.svelte.js'
 import { useQueryClient } from './useQueryClient.js'
@@ -216,11 +215,12 @@ export function createQueries<
     }),
   )
 
+  // can't do same as createMutation, as QueriesObserver has no `setOptions` method
   const observer = $derived(
     new QueriesObserver<TCombinedResult>(
       client,
-      untrack(() => resolvedQueryOptions),
-      untrack(() => combine as QueriesObserverOptions<TCombinedResult>),
+      resolvedQueryOptions,
+      combine as QueriesObserverOptions<TCombinedResult>,
     ),
   )
 

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

@@ -0,0 +1,44 @@
+import { untrack } from 'svelte'
+// modified from the great https://github.com/svecosystem/runed
+function runEffect(
+  flush: 'post' | 'pre',
+  effect: () => void | VoidFunction,
+): void {
+  switch (flush) {
+    case 'post':
+      $effect(effect)
+      break
+    case 'pre':
+      $effect.pre(effect)
+      break
+  }
+}
+type Getter<T> = () => T
+export const watchChanges = <T>(
+  sources: Getter<T> | Array<Getter<T>>,
+  flush: 'post' | 'pre',
+  effect: (
+    values: T | Array<T>,
+    previousValues: T | undefined | Array<T | undefined>,
+  ) => void,
+) => {
+  let active = false
+  let previousValues: T | undefined | Array<T | undefined> = Array.isArray(
+    sources,
+  )
+    ? []
+    : undefined
+  runEffect(flush, () => {
+    const values = Array.isArray(sources)
+      ? sources.map((source) => source())
+      : sources()
+    if (!active) {
+      active = true
+      previousValues = values
+      return
+    }
+    const cleanup = untrack(() => effect(values, previousValues))
+    previousValues = values
+    return cleanup
+  })
+}

packages/svelte-query/tests/ProviderWrapper.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+  import { QueryClient } from '@tanstack/query-core'
+  import { QueryClientProvider } from '../src/index.js'
+  import { Snippet } from 'svelte'
+
+  const {
+    queryClient = new QueryClient(),
+    children,
+  }: { queryClient?: QueryClient; children: Snippet } = $props()
+</script>
+
+<QueryClientProvider client={queryClient}>
+  {@render children()}
+</QueryClientProvider>

packages/svelte-query/tests/createQuery.svelte.test.ts

@@ -225,14 +225,12 @@ describe('createQuery', () => {
     await withEffectRoot(async () => {
       const { promise, resolve } = promiseWithResolvers<string>()
 
-      const query = $derived(
-        createQuery<string, Error>(
-          () => ({
-            queryKey: key,
-            queryFn: () => promise,
-          }),
-          () => queryClient,
-        ),
+      const query = createQuery<string, Error>(
+        () => ({
+          queryKey: key,
+          queryFn: () => promise,
+        }),
+        () => queryClient,
       )
 
       expect(query).toEqual(
@@ -1892,4 +1890,31 @@ describe('createQuery', () => {
       expect(query.error?.message).toBe('Local Error')
     }),
   )
+
+  it(
+    'should support changing provided query client',
+    withEffectRoot(async () => {
+      const queryClient1 = new QueryClient()
+      const queryClient2 = new QueryClient()
+
+      let queryClient = $state(queryClient1)
+
+      const key = ['test']
+
+      createQuery(
+        () => ({
+          queryKey: key,
+          queryFn: () => Promise.resolve('prefetched'),
+        }),
+        () => queryClient,
+      )
+
+      expect(queryClient1.getQueryCache().find({ queryKey: key })).toBeDefined()
+
+      queryClient = queryClient2
+      flushSync()
+
+      expect(queryClient2.getQueryCache().find({ queryKey: key })).toBeDefined()
+    }),
+  )
 })

packages/svelte-query/tests/useIsFetching/BaseExample.svelte

@@ -1,24 +1,11 @@
 <script lang="ts">
-  import { QueryClient } from '@tanstack/query-core'
-  import { createQuery, useIsFetching } from '../../src/index.js'
-  import { sleep } from '@tanstack/query-test-utils'
-
-  const queryClient = new QueryClient()
-  let ready = $state(false)
-
-  const isFetching = useIsFetching(undefined, queryClient)
-
-  const query = createQuery(
-    () => ({
-      queryKey: ['test'],
-      queryFn: () => sleep(10).then(() => 'test'),
-      enabled: ready,
-    }),
-    () => queryClient,
-  )
+  import ProviderWrapper from '../ProviderWrapper.svelte'
+  import FetchStatus from './FetchStatus.svelte'
+  import Query from './Query.svelte'
 </script>
 
-<button onclick={() => (ready = true)}>setReady</button>
+<ProviderWrapper>
+  <FetchStatus />
 
-<div>isFetching: {isFetching.current}</div>
-<div>Data: {query.data ?? 'undefined'}</div>
+  <Query />
+</ProviderWrapper>

packages/svelte-query/tests/useIsFetching/FetchStatus.svelte

@@ -0,0 +1,6 @@
+<script lang="ts">
+  import { useIsFetching } from '../../src/index.js'
+  const isFetching = useIsFetching()
+</script>
+
+<div>isFetching: {isFetching.current}</div>

packages/svelte-query/tests/useIsFetching/Query.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import { createQuery } from '../../src/index.js'
+  import { sleep } from '@tanstack/query-test-utils'
+
+  let ready = $state(false)
+
+  const query = createQuery(() => ({
+    queryKey: ['test'],
+    queryFn: async () => {
+      await sleep(10)
+      return 'test'
+    },
+    enabled: ready,
+  }))
+</script>
+
+<button onclick={() => (ready = true)}>setReady</button>
+
+<div>Data: {query.data ?? 'undefined'}</div>