Fix useMutationState

Author: lachlancollins

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

@@ -9,6 +9,12 @@ import type {
   CreateBaseQueryResult,
 } from './types.js'
 
+/**
+ * Base implementation for `createQuery` and `createInfiniteQuery`
+ * @param options - A function that returns query options
+ * @param Observer - The observer from query-core
+ * @param queryClient - Custom query client which overrides provider
+ */
 export function createBaseQuery<
   TQueryFnData,
   TError,
@@ -20,11 +26,10 @@ export function createBaseQuery<
     CreateBaseQueryOptions<TQueryFnData, TError, TData, TQueryData, TQueryKey>
   >,
   Observer: typeof QueryObserver,
-  queryClientOption?: Accessor<QueryClient>,
+  queryClient?: Accessor<QueryClient>,
 ): CreateBaseQueryResult<TData, TError> {
   /** Load query client */
-  const queryClient = $derived(queryClientOption?.())
-  const client = $derived(useQueryClient(queryClient))
+  const client = $derived(useQueryClient(queryClient?.()))
   const isRestoring = useIsRestoring()
 
   const resolvedOptions = $derived.by(() => {

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

@@ -1,31 +1,35 @@
-import { MutationObserver } from '@tanstack/query-core'
-import { untrack } from 'svelte'
+import { onDestroy } from 'svelte'
+
+import { MutationObserver, notifyManager } from '@tanstack/query-core'
 import { useQueryClient } from './useQueryClient.js'
-import { createRawRef } from './containers.svelte.js'
 import type {
   Accessor,
   CreateMutateFunction,
   CreateMutationOptions,
   CreateMutationResult,
 } from './types.js'
+
 import type { DefaultError, QueryClient } from '@tanstack/query-core'
 
+/**
+ * @param options - A function that returns mutation options
+ * @param queryClient - Custom query client which overrides provider
+ */
 export function createMutation<
   TData = unknown,
   TError = DefaultError,
   TVariables = void,
   TContext = unknown,
 >(
   options: Accessor<CreateMutationOptions<TData, TError, TVariables, TContext>>,
-  queryClientOption?: Accessor<QueryClient>,
+  queryClient?: Accessor<QueryClient>,
 ): CreateMutationResult<TData, TError, TVariables, TContext> {
-  const queryClient = $derived(queryClientOption?.())
-  const client = $derived(useQueryClient(queryClient))
+  const client = useQueryClient(queryClient?.())
 
   const observer = $derived(
     new MutationObserver<TData, TError, TVariables, TContext>(
       client,
-      untrack(() => options()),
+      options(),
     ),
   )
 
@@ -35,23 +39,35 @@ export function createMutation<
     observer.mutate(variables, mutateOptions).catch(noop)
   })
 
-  function createResult() {
-    const result = observer.getCurrentResult()
-    return {
-      ...result,
-      mutateAsync: result.mutate,
-      mutate,
-    }
-  }
-
-  // svelte-ignore state_referenced_locally
-  const [mutation, update] = createRawRef(createResult())
-
-  $effect(() => update(createResult()))
   $effect.pre(() => {
     observer.setOptions(options())
   })
-  return mutation
+
+  const result = $state(observer.getCurrentResult())
+
+  const unsubscribe = observer.subscribe((val) => {
+    notifyManager.batchCalls(() => {
+      Object.assign(result, val)
+    })()
+  })
+
+  onDestroy(() => {
+    unsubscribe()
+  })
+
+  // @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]
+    },
+  })
 }
 
 function noop() {}

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

@@ -199,10 +199,9 @@ export function createQueries<
         ]
     combine?: (result: QueriesResults<T>) => TCombinedResult
   }>,
-  queryClientOption?: Accessor<QueryClient>,
+  queryClient?: Accessor<QueryClient>,
 ): TCombinedResult {
-  const queryClient = $derived(queryClientOption?.())
-  const client = $derived(useQueryClient(queryClient))
+  const client = $derived(useQueryClient(queryClient?.()))
   const isRestoring = useIsRestoring()
 
   const { queries, combine } = $derived.by(createQueriesOptions)

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

@@ -1,5 +1,5 @@
+import { replaceEqualDeep } from '@tanstack/query-core'
 import { useQueryClient } from './useQueryClient.js'
-import { createRawRef } from './containers.svelte.js'
 import type {
   MutationCache,
   MutationState,
@@ -24,7 +24,33 @@ export function useMutationState<TResult = MutationState>(
   queryClient?: QueryClient,
 ): Array<TResult> {
   const mutationCache = useQueryClient(queryClient).getMutationCache()
-  let [mutation, update] = createRawRef(getResult(mutationCache, options))
-  $effect(() => update(getResult(mutationCache, options)))
-  return mutation
+  const result = $state(getResult(mutationCache, options))
+
+  $effect(() => {
+    const unsubscribe = mutationCache.subscribe(() => {
+      const nextResult = replaceEqualDeep(
+        result,
+        getResult(mutationCache, options),
+      )
+      if (result !== nextResult) {
+        Object.assign(result, nextResult)
+      }
+    })
+
+    return unsubscribe
+  })
+
+  /*  $effect(() => {
+    mutationCache.subscribe(() => {
+      const nextResult = replaceEqualDeep(
+        result.current,
+        getResult(mutationCache, optionsRef),
+      )
+      if (result.current !== nextResult) {
+        result = nextResult
+        //notifyManager.schedule(onStoreChange)
+      }
+    })
+  }) */
+  return result
 }

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

@@ -1,5 +1,5 @@
-import { QueryCache, QueryClient, createQueries } from '@tanstack/svelte-query'
 import { beforeEach, describe, expect, expectTypeOf, it, vi } from 'vitest'
+import { QueryCache, QueryClient, createQueries } from '../src/index.js'
 import { promiseWithResolvers, withEffectRoot } from './utils.svelte.js'
 import type {
   CreateQueryOptions,
@@ -8,7 +8,7 @@ import type {
   QueryFunctionContext,
   QueryKey,
   skipToken,
-} from '@tanstack/svelte-query'
+} from '../src/index.js'
 
 describe('createQueries', () => {
   const queryCache = new QueryCache()

packages/svelte-query/tests/createQueries.test-d.ts

@@ -1,6 +1,6 @@
 import { describe, expectTypeOf, it } from 'vitest'
-import { createQueries, queryOptions } from '@tanstack/svelte-query'
-import type { CreateQueryResult } from '@tanstack/svelte-query'
+import { createQueries, queryOptions } from '../src/index.js'
+import type { CreateQueryResult } from '../src/index.js'
 
 describe('createQueries', () => {
   it('should return correct data for dynamic queries with mixed result types', () => {

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

@@ -1,13 +1,13 @@
+import { flushSync } from 'svelte'
+import { beforeEach, describe, expect, expectTypeOf, it, vi } from 'vitest'
 import {
   QueryCache,
   QueryClient,
   createQuery,
   keepPreviousData,
-} from '@tanstack/svelte-query'
-import { flushSync } from 'svelte'
-import { beforeEach, describe, expect, expectTypeOf, it, vi } from 'vitest'
+} from '../src/index.js'
 import { promiseWithResolvers, sleep, withEffectRoot } from './utils.svelte.js'
-import type { CreateQueryResult } from '@tanstack/svelte-query'
+import type { CreateQueryResult } from '../src/index.js'
 
 describe('createQuery', () => {
   const queryCache = new QueryCache()

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

@@ -1,5 +1,5 @@
-import { createQuery, queryOptions } from '@tanstack/svelte-query'
 import { describe, expectTypeOf, it } from 'vitest'
+import { createQuery, queryOptions } from '../src/index.js'
 
 describe('initialData', () => {
   describe('Config object overload', () => {

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

@@ -1,8 +1,7 @@
 <script lang="ts">
   import { QueryClient } from '@tanstack/query-core'
-  import { createMutation } from '../../src/createMutation.svelte'
+  import { createMutation, useIsMutating } from '../../src/index.js'
   import { sleep } from '../utils.svelte.js'
-  import { useIsMutating } from '../../src/useIsMutating.svelte'
 
   const queryClient = new QueryClient()
   const isMutating = useIsMutating(undefined, queryClient)

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

@@ -1,8 +1,10 @@
 <script lang="ts">
   import { QueryClient } from '@tanstack/query-core'
-  import { setQueryClientContext } from '../../src/index.js'
-  import { createMutation } from '../../src/createMutation.svelte'
-  import { useMutationState } from '../../src/useMutationState.svelte'
+  import {
+    createMutation,
+    setQueryClientContext,
+    useMutationState,
+  } from '../../src/index.js'
   import type {
     Accessor,
     CreateMutationOptions,