fix(svelte-5-adapter): function for createMutation options (#7805)

* fix(svelte-5-adapter): require function for createMutation options

* Fix type errors

Author: lachlancollins

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

@@ -19,16 +19,16 @@
     refetchInterval: intervalMs,
   }))
 
-  const addMutation = createMutation({
+  const addMutation = createMutation(() => ({
     mutationFn: (value: string) =>
       fetch(`${endpoint}?add=${value}`).then((r) => r.json()),
     onSuccess: () => client.invalidateQueries({ queryKey: ['refetch'] }),
-  })
+  }))
 
-  const clearMutation = createMutation({
+  const clearMutation = createMutation(() => ({
     mutationFn: () => fetch(`${endpoint}?clear=1`).then((r) => r.json()),
     onSuccess: () => client.invalidateQueries({ queryKey: ['refetch'] }),
-  })
+  }))
 </script>
 
 <h1>Auto Refetch with stale-time set to 1s</h1>

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

@@ -41,7 +41,7 @@
     queryFn: fetchTodos,
   }))
 
-  const addTodoMutation = createMutation({
+  const addTodoMutation = createMutation(() => ({
     mutationFn: createTodo,
     onMutate: async (newTodo: string) => {
       text = ''
@@ -74,7 +74,7 @@
     onSettled: () => {
       client.invalidateQueries({ queryKey: ['optimistic'] })
     },
-  })
+  }))
 </script>
 
 <h1>Optimistic Updates</h1>

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

@@ -40,12 +40,12 @@
     })
   }
 
-  const addMutation = createMutation({
+  const addMutation = createMutation(() => ({
     mutationFn: postTodo,
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['todos'] })
     },
-  })
+  }))
 </script>
 
 <div>

examples/svelte/playground/src/routes/EditTodo.svelte

@@ -73,14 +73,14 @@
     enabled: editingIndex.value !== null,
   }))
 
-  const saveMutation = createMutation({
+  const saveMutation = createMutation(() => ({
     mutationFn: patchTodo,
     onSuccess: (data) => {
       // Update `todos` and the individual todo queries when this mutation succeeds
       queryClient.invalidateQueries({ queryKey: ['todos'] })
       queryClient.setQueryData(['todo', { id: editingIndex }], data)
     },
-  })
+  }))
 
   const todo = $derived(query.data)
 

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

@@ -30,3 +30,4 @@
 
 <div>data: {query.data ?? 'undefined'}</div>
 <div>fetchStatus: {query.fetchStatus}</div>
+<div>fetched: {fetched}</div>

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

@@ -33,7 +33,7 @@ export function createBaseQuery<
 
   /** Creates a store that has the default options applied */
   function updateOptions() {
-    const queryKey: TQueryKey = $state.snapshot(options().queryKey) as any // remove proxy prevent reactive query  in devTools
+    const queryKey: TQueryKey = $state.snapshot(options().queryKey) as any // remove proxy prevent reactive query in DevTools
     const defaultedOptions = client.defaultQueryOptions({
       ...options(),
       queryKey: queryKey,

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

@@ -6,6 +6,7 @@ import type {
   CreateMutateFunction,
   CreateMutationOptions,
   CreateMutationResult,
+  FunctionedParams,
 } from './types'
 
 import type { DefaultError, QueryClient } from '@tanstack/query-core'
@@ -16,13 +17,18 @@ export function createMutation<
   TVariables = void,
   TContext = unknown,
 >(
-  options: CreateMutationOptions<TData, TError, TVariables, TContext>,
+  options: FunctionedParams<
+    CreateMutationOptions<TData, TError, TVariables, TContext>
+  >,
   queryClient?: QueryClient,
 ): CreateMutationResult<TData, TError, TVariables, TContext> {
   const client = useQueryClient(queryClient)
 
   const observer = $derived(
-    new MutationObserver<TData, TError, TVariables, TContext>(client, options),
+    new MutationObserver<TData, TError, TVariables, TContext>(
+      client,
+      options(),
+    ),
   )
   const mutate = $state<
     CreateMutateFunction<TData, TError, TVariables, TContext>
@@ -31,7 +37,7 @@ export function createMutation<
   })
 
   $effect.pre(() => {
-    observer.setOptions(options)
+    observer.setOptions(options())
   })
 
   const result = $state(observer.getCurrentResult())

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

@@ -23,6 +23,7 @@
   )
 
   $effect(() => {
+    // @ts-expect-error
     states.value = [...untrack(() => states.value), $state.snapshot(query)]
   })
 </script>

packages/svelte-query/tests/createInfiniteQuery/SelectExample.svelte

@@ -23,6 +23,7 @@
   )
 
   $effect(() => {
+    // @ts-expect-error
     states.value = [...untrack(() => states.value), $state.snapshot(query)]
   })
 </script>

packages/svelte-query/tests/createMutation/FailureExample.svelte

@@ -12,7 +12,7 @@
   const queryClient = new QueryClient()
   setQueryClientContext(queryClient)
 
-  const mutation = createMutation({ mutationFn: mutationFn })
+  const mutation = createMutation(() => ({ mutationFn: mutationFn }))
 </script>
 
 <button onclick={() => mutation.mutate({ count: ++count })}>Mutate</button>

packages/svelte-query/tests/createMutation/OnSuccessExample.svelte

@@ -11,15 +11,15 @@
   const queryClient = new QueryClient()
   setQueryClientContext(queryClient)
 
-  const mutation = createMutation({
+  const mutation = createMutation(() => ({
     mutationFn: (vars: { count: number }) => Promise.resolve(vars.count),
     onSuccess: (data) => {
       onSuccessMock(data)
     },
     onSettled: (data) => {
       onSettledMock(data)
     },
-  })
+  }))
 </script>
 
 <button onclick={() => mutation.mutate({ count: ++$count })}>Mutate</button>

packages/svelte-query/tests/createMutation/ResetExample.svelte

@@ -5,13 +5,13 @@
   const queryClient = new QueryClient()
   setQueryClientContext(queryClient)
 
-  const mutation = createMutation({
+  const mutation = createMutation(() => ({
     mutationFn: () => {
       const err = new Error('Expected mock error')
       err.stack = ''
       return Promise.reject(err)
     },
-  })
+  }))
 </script>
 
 <button onclick={() => mutation.reset()}>Reset</button>

packages/svelte-query/tests/createQuery/PlaceholderData.svelte

@@ -27,6 +27,7 @@
   )
 
   $effect(() => {
+    // @ts-expect-error
     states.value = [...untrack(() => states.value), $state.snapshot(query)]
   })
 </script>

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

@@ -8,13 +8,13 @@
   const isMutating = useIsMutating(undefined, queryClient)
 
   const mutation = createMutation(
-    {
+    () => ({
       mutationKey: ['mutation-1'],
       mutationFn: async () => {
         await sleep(5)
         return 'data'
       },
-    },
+    }),
     queryClient,
   )
 </script>

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

@@ -5,6 +5,7 @@
   import { useMutationState } from '../../src/useMutationState.svelte'
   import type {
     CreateMutationOptions,
+    FunctionedParams,
     MutationStateOptions,
   } from '../../src/index'
 
@@ -13,8 +14,8 @@
     errorMutationOpts,
     mutationStateOpts,
   }: {
-    successMutationOpts: CreateMutationOptions
-    errorMutationOpts: CreateMutationOptions
+    successMutationOpts: FunctionedParams<CreateMutationOptions>
+    errorMutationOpts: FunctionedParams<CreateMutationOptions>
     mutationStateOpts?: MutationStateOptions | undefined
   } = $props()
 

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

@@ -12,15 +12,15 @@ describe('useMutationState', () => {
 
     const rendered = render(BaseExample, {
       props: {
-        successMutationOpts: {
+        successMutationOpts: () => ({
           mutationKey: ['success'],
           mutationFn: successMutationFn,
-        },
+        }),
 
-        errorMutationOpts: {
+        errorMutationOpts: () => ({
           mutationKey: ['error'],
           mutationFn: errorMutationFn,
-        },
+        }),
       },
     })
 
@@ -49,15 +49,15 @@ describe('useMutationState', () => {
 
     const rendered = render(BaseExample, {
       props: {
-        successMutationOpts: {
+        successMutationOpts: () => ({
           mutationKey: ['success'],
           mutationFn: successMutationFn,
-        },
+        }),
 
-        errorMutationOpts: {
+        errorMutationOpts: () => ({
           mutationKey: ['error'],
           mutationFn: errorMutationFn,
-        },
+        }),
 
         mutationStateOpts: {
           filters: { status: 'error' },
@@ -88,15 +88,15 @@ describe('useMutationState', () => {
 
     const rendered = render(BaseExample, {
       props: {
-        successMutationOpts: {
+        successMutationOpts: () => ({
           mutationKey: ['success'],
           mutationFn: successMutationFn,
-        },
+        }),
 
-        errorMutationOpts: {
+        errorMutationOpts: () => ({
           mutationKey: ['error'],
           mutationFn: errorMutationFn,
-        },
+        }),
 
         mutationStateOpts: {
           filters: { mutationKey: ['success'] },