Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

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

Đang mở
  • Có gì không ổn?
#11,272 0 bình luận 0 reaction 0 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 1 ngày

@MahathirMohammadShuvo đang làm issue này rồi.

Từ ngày 29/8/2026.

  • #11273 của @alex-js-ltd — đã đóng, không merge
  • #11281 của @dikshit-n — đã đóng, không merge
  • #11329 của @MahathirMohammadShuvo — đang mở

Đánh giá

Độ khó
3/5
Thời gian dự kiến
1-2 ngày
Mức phù hợp với người mới
78/100
Loại issue
Lỗi
Độ rõ ràng
Đặc tả rõ ràng
Mức độ hoạt động
Sôi nổi
Công nghệ
react, typescript
Lĩnh vực
frontend, testing

Hướng nghiên cứu

Bắt đầu với phần triển khai useMutationState cùng logic getSnapshot và mutationCache.subscribe của nó, sau đó thêm trường hợp hồi quy vào packages/react-query/src/tests/useMutationState.test.tsx. Chạy pnpm nx run @tanstack/react-query:test:lib -- useMutationState. Được xem là hoàn tất khi kết quả cập nhật từ variables: 1,2 thành variables: 1 khi các bộ lọc thay đổi mà không có cập nhật cache.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

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

Ngôn ngữ chính
TypeScript
Star
50.4k
Fork
4.2k
Merge trung bình
11 giờ 33 phút
Pull request đã merge (30 ngày)
421

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của TanStack/query

Tất cả issue của TanStack/query

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.