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'] }), - }) + }))

Auto Refetch with stale-time set to 1s

diff --git a/examples/svelte/optimistic-updates/src/routes/+page.svelte b/examples/svelte/optimistic-updates/src/routes/+page.svelte index f3ff93fad7..feb5d1085c 100644 --- a/examples/svelte/optimistic-updates/src/routes/+page.svelte +++ b/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'] }) }, - }) + }))

Optimistic Updates

diff --git a/examples/svelte/playground/src/routes/AddTodo.svelte b/examples/svelte/playground/src/routes/AddTodo.svelte index 11e2bb22eb..f3f990f100 100644 --- a/examples/svelte/playground/src/routes/AddTodo.svelte +++ b/examples/svelte/playground/src/routes/AddTodo.svelte @@ -40,12 +40,12 @@ }) } - const addMutation = createMutation({ + const addMutation = createMutation(() => ({ mutationFn: postTodo, onSuccess: () => { queryClient.invalidateQueries({ queryKey: ['todos'] }) }, - }) + }))
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'] },