Hacktoberfest 2026: die Issues, die Maintainer für den Oktober markiert haben – offen und einsteigerfreundlich. Hacktoberfest-Issues durchsuchen

useMutationState does not update when filters change (react-query)

Offen
  • Stimmt etwas nicht?
#11,272 0 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Maintainer antworten meist innerhalb von 1 Tag

@MahathirMohammadShuvo arbeitet bereits daran.

Seit 29.8.2026.

  • #11273 von @alex-js-ltd — ohne Merge geschlossen
  • #11281 von @dikshit-n — ohne Merge geschlossen
  • #11329 von @MahathirMohammadShuvo — offen

Bewertung

Schwierigkeit
3/5
Geschätzter Aufwand
1-2 Tage
Anfängerfreundlichkeit
78/100
Issue-Typ
Bug
Klarheit
Klar beschrieben
Aktivitätsstatus
Aktiv
Tech-Stack
react, typescript
Bereich
frontend, testing

Rechercherichtung

Beginne mit der Implementierung von useMutationState und deren getSnapshot- sowie mutationCache.subscribe-Logik und füge dann den Regressionsfall zu packages/react-query/src/tests/useMutationState.test.tsx hinzu. Führe pnpm nx run @tanstack/react-query:test:lib -- useMutationState aus. Fertig ist die Änderung, wenn das Ergebnis von variables: 1,2 zu variables: 1 aktualisiert wird, wenn sich die Filter ohne eine Cache-Aktualisierung ändern.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

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

Vorherrschende Sprache
TypeScript
Sterne
50.4k
Forks
4.2k
Ø Merge
11 Std. 33 Min.
Gemergte PRs (30 T.)
421

Entwicklungsumgebung

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus TanStack/query

Alle Issues in TanStack/query

Ähnliche Issues

Weitere Issues zu TypeScript

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.