What is the good way to use suspense with both standard and infinite queries (without waterfalls)?

[Fenykepy]

First thanks a lot for this marvelous library!

I know the best way would be to use a loader at router level, but in not router related application parts, what is the good way to use suspense with both infinite and standard queries ?

• useSuspenseQueries is great, but it doesn't handle infinite queries.

• This creates a waterfall:

const result = useSuspenseQuery(myQueryOptions)
const infiniteResult = useSuspenseInfiniteQuery(myInfiniteQueryOptions)

• Splitting my code in two sibling components also creates a waterfall with React 19.2 (I thought React 19 RC waterfall problem on sibling components was solved but apparently not, or I did something wrong (my sibling components are deeply nested under their parent with Suspense, it may come from that)):

• I ended up using React.use with ensure(Infinite)QueryData (like if it was a router loader), but it's not very elegant as I repeat twice my query options:

const queryClient = useQueryClient()
use(Promise.all([
    // Preload without waterfall
    queryClient.ensureQueryData(myQueryOptions),
    queryClient.ensureInfiniteQueryData(myInfiniteQueryOptions),
]))

const result = useSuspenseQuery(myQueryOptions)
const infiniteResult = useSuspenseInfiniteQuery(myInfiniteQueryOptions)

Any better way?

[TkDodo]

splitting into siblings should work, if not, please show a reproduction.

I ended up using React.use with ensure(Infinite)QueryData
Any better way?

We have a usePrefetchQuery and a usePrefetchInfiniteQuery hook you could use instead.

[Fenykepy]

Thank you for you quick reply (on a Sunday)!

usePrefetchQuery and usePrefetchInfiniteQuery work like a charm, thank you!

I'll investigate further for siblings, the most likely is that there's something wrong in my code.

Thanks again!