I found useSuspenseQuery placeholderData have been removed in v5.24.2，how to use it without breaking the UI?

[recallwei]

@TkDodo

related PR: #6973

Firstly, I want to describe my expected UI behaviour: Only the first query should fall out to pending component, subsequent queries depend on isFetching and placeholderData.

I am working on an admin system, now I am using useSuspenseQuery to fetch list data.(This project both use @tanstack/react-router and @tanstack/react-query)

I use ensureQueryData in the router loader function, and the page gets the useSuspenseQuery data. What I expected is the page should fall back to pendingComponent when the first query is fetching.

However, some user actions need to change the query key to fetch the other page or do some keyword-related search.

Before upgrading to the latest version, the placeholderData still seems to work. But now, a fetching with a new query key will directly fall back to the pendingComponent, this is weird.

I found a solution but I don't know if it is correct. Add throwOnError: false to every list query.
But the side effect is that the first loading will not display.

[TkDodo]

if you use suspense, please read up on how suspense works in react. We just integrate with that. With suspense, you want to use transitions or deferred values to avoid showing the fallback.

Our docs link to the react docs for this.

[recallwei]

@TkDodo

I wrapped the query key update function with startTransition, UI doesn't fall back any more. But how can I get the status of isfetching. The status of useSuspenseQuery is always false.

I want to get the status of refetch so that the status of the list check box can be cleared at the same time when refetch. If I use useQuery, the data may be undefined. Enable Suspense fallback only when the data is fetching for the first time, and then the table component loading status is depend on refetching status.

Or should I use useQuery instead of useSuspenseQuery?
Is there any way to get the refetching status when using useSuspenseQuery?

[recallwei]

const {
    data,
    refetch,
    isFetching
  } = useSuspenseQuery(queryOption(params))

I also find that after I doing refetch, isFetching will be true, this is what I expected. But isFetching will not change when the params change.

[TkDodo]

useTransition from react exposes this. Really this is just a react question and you find all the answers in the react docs

[recallwei]

@TkDodo

I was directly using startTransition from React just now, I don't know useTransition API gave me the pending state.

Thanks a lot for wasting time to resolve my too-tedious problem and save me. I never used this feature before and I didn't know this API, react-query did this for me.

I waste several hours to fix this problem.

🍻 Anyway, you save my life. I'll buy you a cup of coffee.

[0xyy]

@recallwei @TkDodo Hey I have a problem that when I wrapped actions with startTransition and i am seeing isPending everything is fine, I want to pass my isPending to table component and show a table loader but instead my app still falls into the higher loading component from tanstack router, I also wrapped my component with Suspense but then it is falling into the loader provided in fallback from suspense, please help how can I have just loading in table not the whole ui as current

[TkDodo]

I would need to see a minimal reproduction of your problem please

[0xyy]

@TkDodo I have my app with list of users inside table with basic pagination (page number, page size).
Everything is working fine, but I wanted to make loading spinner inside my table whenever the request will be taken longer for example due to bad connection. I am using tanstack query + tanstack router.

I tried doing this with useTransition hook from react and tried to render loader inside table whenever isPending from returned from hook is true but that loader from table was "over written" by the higher loaders for example inside createFileRoute or defaultPendingComponent.

I also tried to wrap whole with Suspense but it also got into the loader inside fallback prop. I would be grateful for any help because I cannot resolve this from days.

My desired behaviour is to just show loading component inside table component when I am changing pages or page size but the "higher" global loader is activated and it is on the whole screen

Here is small example in the "posts" tab with a comment inside code. If any code snippets from my real app will be needed I will provide it. Thanks.
https://stackblitz.com/edit/tanstack-router-nkbkre?file=src%2Froutes%2Fposts.tsx

1. Click posts tab (there is global loader)
2. Click 5 posts (there is for 1ms inside loader showed and then the global loader again is showed hiding inside loader)

I expect that when changing amount of posts just the inside loader will be displayed (defined inside list) not the pending component defined in route or global one (defined in defaultPendingComponent). So I need some isLoading variable to display conditionally the table loader, but instead the higher loaders are activated. I think I shouldn't use ensureQueryData inside loader because its triggering the loader