fix(svelte-query): update observers when passed in query client changes

Author: hmnd

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

@@ -8,6 +8,7 @@ import type {
   CreateBaseQueryOptions,
   CreateBaseQueryResult,
 } from './types.js'
+import { watchChanges } from './utils.svelte.js'
 
 /**
  * Base implementation for `createQuery` and `createInfiniteQuery`
@@ -39,15 +40,25 @@ export function createBaseQuery<
   })
 
   /** Creates the observer */
-  const observer = new Observer<
-    TQueryFnData,
-    TError,
-    TData,
-    TQueryData,
-    TQueryKey
-  >(
-    client,
-    untrack(() => resolvedOptions),
+  // svelte-ignore state_referenced_locally - intentional, initial value
+  let observer = $state(
+    new Observer<TQueryFnData, TError, TData, TQueryData, TQueryKey>(
+      client,
+      resolvedOptions,
+    ),
+  )
+  watchChanges(
+    () => client,
+    'pre',
+    () => {
+      observer = new Observer<
+        TQueryFnData,
+        TError,
+        TData,
+        TQueryData,
+        TQueryKey
+      >(client, resolvedOptions)
+    },
   )
 
   function createResult() {
@@ -69,19 +80,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,4 +1,4 @@
-import { onDestroy } from 'svelte'
+import { onDestroy, untrack } from 'svelte'
 
 import { MutationObserver, notifyManager } from '@tanstack/query-core'
 import { useQueryClient } from './useQueryClient.js'
@@ -8,6 +8,7 @@ import type {
   CreateMutationOptions,
   CreateMutationResult,
 } from './types.js'
+import { watchChanges } from './utils.svelte.js'
 
 import type { DefaultError, QueryClient } from '@tanstack/query-core'
 
@@ -24,49 +25,80 @@ 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 = new MutationObserver<TData, TError, TVariables, TContext>(
-    client,
-    options(),
+  // 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(),
+    ),
   )
 
+  watchChanges(
+    () => client,
+    'pre',
+    () => {
+      observer = new MutationObserver(client, options())
+    },
+  )
+
+  $effect.pre(() => {
+    observer.setOptions(options())
+  })
+
   const mutate = <CreateMutateFunction<TData, TError, TVariables, TContext>>((
     variables,
     mutateOptions,
   ) => {
     observer.mutate(variables, mutateOptions).catch(noop)
   })
 
-  $effect.pre(() => {
-    observer.setOptions(options())
-  })
+  let result = $state(observer.getCurrentResult())
+  watchChanges(
+    () => observer,
+    'pre',
+    () => {
+      result = observer.getCurrentResult()
+    },
+  )
 
-  const result = observer.getCurrentResult()
+  const subscribe = (
+    observer: MutationObserver<TData, TError, TVariables, TContext>,
+  ) =>
+    observer.subscribe((val) => {
+      notifyManager.batchCalls(() => {
+        Object.assign(result, val)
+      })()
+    })
+  let unsubscribe = $state(subscribe(observer))
 
-  const unsubscribe = observer.subscribe((val) => {
-    notifyManager.batchCalls(() => {
-      Object.assign(result, val)
-    })()
+  $effect.pre(() => {
+    unsubscribe = subscribe(observer)
   })
 
   onDestroy(() => {
     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
 }
 
 function noop() {}

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/createQuery.svelte.test.ts

@@ -1885,4 +1885,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()
+    }),
+  )
 })