diff --git a/.changeset/svelte-query-usemutationstate-filter-shrink.md b/.changeset/svelte-query-usemutationstate-filter-shrink.md new file mode 100644 index 00000000000..668701557d6 --- /dev/null +++ b/.changeset/svelte-query-usemutationstate-filter-shrink.md @@ -0,0 +1,5 @@ +--- +'@tanstack/svelte-query': patch +--- + +fix(svelte-query): remove mutations that no longer match the filter in `useMutationState` diff --git a/packages/svelte-query/src/useMutationState.svelte.ts b/packages/svelte-query/src/useMutationState.svelte.ts index c517e64b480..5316da7445a 100644 --- a/packages/svelte-query/src/useMutationState.svelte.ts +++ b/packages/svelte-query/src/useMutationState.svelte.ts @@ -33,7 +33,7 @@ export function useMutationState( getResult(mutationCache, options), ) if (result !== nextResult) { - Object.assign(result, nextResult) + result.splice(0, result.length, ...nextResult) } }) diff --git a/packages/svelte-query/tests/useMutationState/useMutationState.svelte.test.ts b/packages/svelte-query/tests/useMutationState/useMutationState.svelte.test.ts index 703c05df631..be9c8980b1c 100644 --- a/packages/svelte-query/tests/useMutationState/useMutationState.svelte.test.ts +++ b/packages/svelte-query/tests/useMutationState/useMutationState.svelte.test.ts @@ -156,4 +156,40 @@ describe('useMutationState', () => { expect(errorMutationFn).toHaveBeenCalledTimes(1) expect(rendered.getByText('Data: ["success"]')).toBeInTheDocument() }) + + it('should remove mutations that no longer match the filter', async () => { + const firstKey = queryKey() + const secondKey = queryKey() + const mutationFn = vi.fn(() => sleep(10).then(() => 'data')) + + const rendered = render(Base, { + props: { + queryClient, + successMutationOpts: () => ({ + mutationKey: firstKey, + mutationFn, + }), + errorMutationOpts: () => ({ + mutationKey: secondKey, + mutationFn, + }), + mutationStateOpts: { + filters: { status: 'pending' }, + }, + }, + }) + + fireEvent.click(rendered.getByRole('button', { name: /Success/i })) + fireEvent.click(rendered.getByRole('button', { name: /Error/i })) + + await vi.advanceTimersByTimeAsync(0) + + expect( + rendered.getByText('Data: ["pending","pending"]'), + ).toBeInTheDocument() + + await vi.advanceTimersByTimeAsync(10) + + expect(rendered.getByText('Data: []')).toBeInTheDocument() + }) })