useSuspense only on inital load, to allow incremental update

[michaltaberski]

1

I have case where I have a main content and paginated sidebar. Both areas I am feeding with data using useSuspenseQuery. More or less like this:

2

On initial load I have Suspense wrapper so the loading state looks like this:

3

The problem I have is updating page on sidebar. After I update a page parameter I am running into loading screen from step 2, however I would like to load the data incrementally, so it looks like this:

Question

How to run useQuerySuspense only in suspense mode on initial load, but later update query parameter without triggering whole page loader?

[TkDodo]

I think you’d want to conditionally add another suspense boundary around sidebar, depending on if you have main data already or not. As suspense bubbles up to the nearest boundary, it would prevent the boundary that wraps the whole page from showing.

[michaltaberski]

Yes you are right - that might work in some cases 👍 , but I can find a corner cases where falling back to regular useQuery would make it easier.

I would like to ask you @TkDodo - would you say the useSuspenseQuery the recommended way I should aim to use and the prior regular useQuery is rather "outdated" pattern, or it's more case to case decision?

[TkDodo]

we have an experimental feature where you can take the promise returned from useQuery and (conditionally) pass it to use to suspend:

const { promise } = useQuery({ queryKey, queryFn, experimental_prefetchInRender: true })

const data = use(promise)

I would like this to be stable and the primary suspense API one day but it’s hard to get right 😅