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>