diff --git a/examples/svelte/auto-refetching/src/routes/+page.svelte b/examples/svelte/auto-refetching/src/routes/+page.svelte
index f9eba882b2..042dc5492f 100644
--- a/examples/svelte/auto-refetching/src/routes/+page.svelte
+++ b/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'] }),
- })
+ }))
diff --git a/examples/svelte/playground/src/routes/EditTodo.svelte b/examples/svelte/playground/src/routes/EditTodo.svelte
index 10eeea6f65..43d028a634 100644
--- a/examples/svelte/playground/src/routes/EditTodo.svelte
+++ b/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)
diff --git a/packages/svelte-query-persist-client/tests/FreshData/FreshData.svelte b/packages/svelte-query-persist-client/tests/FreshData/FreshData.svelte
index 3dfc17b017..4aa6a6c975 100644
--- a/packages/svelte-query-persist-client/tests/FreshData/FreshData.svelte
+++ b/packages/svelte-query-persist-client/tests/FreshData/FreshData.svelte
@@ -30,3 +30,4 @@
data: {query.data ?? 'undefined'}
fetchStatus: {query.fetchStatus}
+
fetched: {fetched}
diff --git a/packages/svelte-query/src/createBaseQuery.svelte.ts b/packages/svelte-query/src/createBaseQuery.svelte.ts
index d94baccada..ec9739af52 100644
--- a/packages/svelte-query/src/createBaseQuery.svelte.ts
+++ b/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,
diff --git a/packages/svelte-query/src/createMutation.svelte.ts b/packages/svelte-query/src/createMutation.svelte.ts
index b3b221ed1a..7111a8b39e 100644
--- a/packages/svelte-query/src/createMutation.svelte.ts
+++ b/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
,
+ options: FunctionedParams<
+ CreateMutationOptions
+ >,
queryClient?: QueryClient,
): CreateMutationResult {
const client = useQueryClient(queryClient)
const observer = $derived(
- new MutationObserver(client, options),
+ new MutationObserver(
+ client,
+ options(),
+ ),
)
const mutate = $state<
CreateMutateFunction
@@ -31,7 +37,7 @@ export function createMutation<
})
$effect.pre(() => {
- observer.setOptions(options)
+ observer.setOptions(options())
})
const result = $state(observer.getCurrentResult())
diff --git a/packages/svelte-query/tests/createInfiniteQuery/BaseExample.svelte b/packages/svelte-query/tests/createInfiniteQuery/BaseExample.svelte
index 452852178b..055583150a 100644
--- a/packages/svelte-query/tests/createInfiniteQuery/BaseExample.svelte
+++ b/packages/svelte-query/tests/createInfiniteQuery/BaseExample.svelte
@@ -23,6 +23,7 @@
)
$effect(() => {
+ // @ts-expect-error
states.value = [...untrack(() => states.value), $state.snapshot(query)]
})
diff --git a/packages/svelte-query/tests/createInfiniteQuery/SelectExample.svelte b/packages/svelte-query/tests/createInfiniteQuery/SelectExample.svelte
index 5cee416b6e..73f7154c9c 100644
--- a/packages/svelte-query/tests/createInfiniteQuery/SelectExample.svelte
+++ b/packages/svelte-query/tests/createInfiniteQuery/SelectExample.svelte
@@ -23,6 +23,7 @@
)
$effect(() => {
+ // @ts-expect-error
states.value = [...untrack(() => states.value), $state.snapshot(query)]
})
diff --git a/packages/svelte-query/tests/createMutation/FailureExample.svelte b/packages/svelte-query/tests/createMutation/FailureExample.svelte
index 7b5491cae8..a2e59f3bc3 100644
--- a/packages/svelte-query/tests/createMutation/FailureExample.svelte
+++ b/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 }))
diff --git a/packages/svelte-query/tests/createMutation/OnSuccessExample.svelte b/packages/svelte-query/tests/createMutation/OnSuccessExample.svelte
index 02e7fd11f5..67e73b435a 100644
--- a/packages/svelte-query/tests/createMutation/OnSuccessExample.svelte
+++ b/packages/svelte-query/tests/createMutation/OnSuccessExample.svelte
@@ -11,7 +11,7 @@
const queryClient = new QueryClient()
setQueryClientContext(queryClient)
- const mutation = createMutation({
+ const mutation = createMutation(() => ({
mutationFn: (vars: { count: number }) => Promise.resolve(vars.count),
onSuccess: (data) => {
onSuccessMock(data)
@@ -19,7 +19,7 @@
onSettled: (data) => {
onSettledMock(data)
},
- })
+ }))
diff --git a/packages/svelte-query/tests/createMutation/ResetExample.svelte b/packages/svelte-query/tests/createMutation/ResetExample.svelte
index 0f7b7f8a80..0e076ee0bc 100644
--- a/packages/svelte-query/tests/createMutation/ResetExample.svelte
+++ b/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)
},
- })
+ }))
diff --git a/packages/svelte-query/tests/createQuery/PlaceholderData.svelte b/packages/svelte-query/tests/createQuery/PlaceholderData.svelte
index 3303629c98..5765acb7d5 100644
--- a/packages/svelte-query/tests/createQuery/PlaceholderData.svelte
+++ b/packages/svelte-query/tests/createQuery/PlaceholderData.svelte
@@ -27,6 +27,7 @@
)
$effect(() => {
+ // @ts-expect-error
states.value = [...untrack(() => states.value), $state.snapshot(query)]
})
diff --git a/packages/svelte-query/tests/useIsMutating/BaseExample.svelte b/packages/svelte-query/tests/useIsMutating/BaseExample.svelte
index b2d71d8760..60b8a914bb 100644
--- a/packages/svelte-query/tests/useIsMutating/BaseExample.svelte
+++ b/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,
)
diff --git a/packages/svelte-query/tests/useMutationState/BaseExample.svelte b/packages/svelte-query/tests/useMutationState/BaseExample.svelte
index beb4e6adab..2a159f70e8 100644
--- a/packages/svelte-query/tests/useMutationState/BaseExample.svelte
+++ b/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
+ errorMutationOpts: FunctionedParams
mutationStateOpts?: MutationStateOptions | undefined
} = $props()
diff --git a/packages/svelte-query/tests/useMutationState/useMutationState.test.ts b/packages/svelte-query/tests/useMutationState/useMutationState.test.ts
index c2190cfb14..1bf779b02e 100644
--- a/packages/svelte-query/tests/useMutationState/useMutationState.test.ts
+++ b/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'] },