useMutationState does not update when filters change (react-query)
Describe the bug
useMutationState() ignores changes to filters. The result is only recomputed when the mutation cache notifies, so after a filter change the array keeps showing the old filters' results until something unrelated touches the cache. If nothing does, it stays wrong.
result.current is only written inside the mutationCache.subscribe() callback, and getSnapshot is () => result.current. So a render with new options recomputes nothing.
Same symptom as #11152 / #11153 in svelte-query, different cause.
Your minimal, reproducible example
N/A, reproduces in the package's own vitest suite.
Steps to reproduce
Add to packages/react-query/src/__tests__/useMutationState.test.tsx, run pnpm nx run @tanstack/react-query:test:lib -- useMutationState:
it('should update the result when mutation filters change without a cache update', async () => {
const queryClient = new QueryClient()
const key1 = queryKey()
const key2 = queryKey()
function Variables({ mutationKey }: { mutationKey?: Array<string> }) {
const variables = useMutationState({
filters: { mutationKey },
select: (mutation) => mutation.state.variables,
})
return <div>variables: {variables.join(',')}</div>
}
function Page({ mutationKey }: { mutationKey?: Array<string> }) {
const { mutate: mutate1 } = useMutation({
mutationKey: key1,
mutationFn: (input: number) => sleep(100).then(() => 'data' + input),
})
const { mutate: mutate2 } = useMutation({
mutationKey: key2,
mutationFn: (input: number) => sleep(100).then(() => 'data' + input),
})
React.useEffect(() => {
mutate1(1)
mutate2(2)
}, [mutate1, mutate2])
return <Variables mutationKey={mutationKey} />
}
const rendered = renderWithClient(queryClient, <Page mutationKey={undefined} />)
await vi.advanceTimersByTimeAsync(0)
expect(rendered.getByText('variables: 1,2')).toBeInTheDocument()
rendered.rerender(<Page mutationKey={key1} />)
expect(rendered.getByText('variables: 1')).toBeInTheDocument()
})Both mutations stay pending, so the cache never notifies. Output stays variables: 1,2 instead of variables: 1.
Expected behavior
The array should always reflect whatever filters currently select, as it does in vue-query, angular and lit.
How often does this bug happen?
Every time
Platform
N/A, jsdom.
Tanstack Query adapter
react-query
TanStack Query version
v5.102.2
TypeScript version
v6.0.3
Source: TanStack/query