search

TanStack / query

🤖 Powerful asynchronous state management, server-state utilities and data fetching for the web. TS/JS, React Query, Solid Query, Svelte Query and Vue Query.
https://tanstack.com/query
MIT License
42.69k stars 2.92k forks source link

solid-query parallel mutation onSuccess invalidate issue #8140

Open andraaspar opened 1 month ago

andraaspar commented 1 month ago

Describe the bug

We have two checkbox components loaded over a slow network. We want to let the user click them at their own pace (not waiting for the response), but then we want to show them correctly once the response comes back.

Yet the old state flashes up until the final response arrives.

See the example.

Your minimal, reproducible example

https://stackblitz.com/edit/solidjs-templates-9nqn4w?file=src%2FAppComp.tsx

Steps to reproduce

  1. Click the two checkboxes within 3 seconds.
  2. Observe the first clicked showing the previous state instead of the new state until the final response arrives.

Expected behavior

The first checkbox to wait in the pending state until the second is resolved, or at least show the correct (new) state.

How often does this bug happen?

Every time

Screenshots or Videos

Image

Platform

Tanstack Query adapter

solid-query

TanStack Query version

5.59.0

TypeScript version

5.1.3

Additional context

No response

andraaspar commented 1 month ago

Here is the fixed version showing a workaround: https://stackblitz.com/edit/solidjs-templates-qrezwj?file=src%2FAppComp.tsx