useSuspenseQueries observers count mismatch

[maciej-baruch]

Describe the bug

When the amount of queries in useSuspenseQueries increases, the new queries resolution/suspense is split into two batches.
The first batch takes care of newQueries.slice(0, previousQueries.length) and stops the suspense, causing the rest of the queries to be still pending (and have undefined data) before the second batch (rest of the newQueries) kicks in.

Your minimal, reproducible example

https://codesandbox.io/p/sandbox/friendly-jang-gjp9p8

Steps to reproduce

1. Click the button.
2. Observe the lifecycle of queries in the console.

Expected behavior

As a user, I would expect newQueries to be resolved all at once in a single suspense.

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

Platform agnostic.

Tanstack Query adapter

react-query

TanStack Query version

5.4.3

TypeScript version

5.2.2

Additional context

No response

[maciej-baruch]

I'd like to attempt to fix that. I will keep you posted.

[TkDodo]

the problem is even easier to see if we move the devtools out of the suspense boundary:

https://codesandbox.io/p/sandbox/fast-sound-53plff?file=%2Fsrc%2Findex.jsx%3A9%2C1

Feel free to look into this. I also have an idea where we might go wrong :)

[maciej-baruch]

I was thinking about simply removing useEffect around setObservers but this seemed like an unnecessary performance cost.

Added some tests to ensure I did not break anything.
Let me know if you think I should cover some more cases or if you have any doubts, or if you simply do not agree with the solution :).