TanStack
solid-query modifies query data on refetch before suspense triggers
Describe the bug
After #6600 I did some more investigating on the solid-query layout shift problem and found it's a synchronization issue with suspense and when the data is actually fetched
The problem is that the <Match> is updated first (data becomes undefined), and the suspense boundary a setTImeout later (when using the default batch scheduling behavior). So there is a brief moment (<= one frame/js task) where there is no data but the suspense hasn't triggered yet. This can lead to a layout shift or other unexpected behavior.
Note that this doesn't happen with queueMicrotask/requestAnimationFrame. I presume this is because the event that causes suspense to trigger is batched. This means that in this case, suspense will update before the next frame.
Your minimal, reproducible example
https://codesandbox.io/p/devbox/tanstack-query-example-solid-basic-typescript-forked-vm69np
Steps to reproduce
- Open the codesandbox
- Press the button a couple times (make sure scheduler is setTimeout)
- Observe layout glitch (it doesn't happen 100% of the time)
Expected behavior
The data should be updated after/with suspense so that suspense fallback works as expected
How often does this bug happen?
Often
Screenshots or Videos
No response
Platform
- Firefox
- Chrome
Tanstack Query adapter
solid-query
TanStack Query version
5.15.5
TypeScript version
No response
Additional context
No response
