Hacktoberfest 2026 : les issues que les mainteneurs ont marquées pour octobre, ouvertes et accessibles aux débutants. Parcourir les issues Hacktoberfest

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

Ouverte
  • Quelque chose ne va pas ?
#11,272 0 commentaires 0 réactions 0 personnes assignées Voir sur GitHub

Les mainteneurs répondent en général sous 1 jour

@MahathirMohammadShuvo y travaille déjà.

Depuis le 29/8/2026.

  • #11273 par @alex-js-ltd — fermée sans fusion
  • #11281 par @dikshit-n — fermée sans fusion
  • #11329 par @MahathirMohammadShuvo — ouverte

Évaluation

Difficulté
3/5
Temps estimé
1-2 jours
Accessibilité débutants
78/100
Type d'issue
Bug
Clarté
Clairement spécifiée
Activité
Active
Stack technique
react, typescript
Domaine
frontend, testing

Piste de recherche

Commencez par l’implémentation de useMutationState et sa logique getSnapshot et mutationCache.subscribe, puis ajoutez le cas de régression à packages/react-query/src/tests/useMutationState.test.tsx. Exécutez pnpm nx run @tanstack/react-query:test:lib -- useMutationState. Le travail est terminé lorsque le résultat est mis à jour de variables: 1,2 vers variables: 1 lorsque les filtres changent sans mise à jour du cache.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Description

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

Langage dominant
TypeScript
Étoiles
50.4k
Forks
4.2k
Merge moyen
7 h 29 min
PR mergées (30 j)
393

Préparer son environnement

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Autres issues de TanStack/query

Toutes les issues de TanStack/query

Issues similaires

Plus d'issues TypeScript

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.