TanStackT
TanStack8mo ago
21 replies
few-sapphire

Loading data in the <Route> with `useSuspenseQuery` forces suspending and scroll reset (w/ example)

I'm trying to fetch data in the loader of a <Route /> that depends on search params and I'm not able to figure out how to do it right (?).

I created a sample repo: https://stackblitz.com/edit/tanstack-router-aiytgf7a?file=src%2Froutes%2Findex.tsx

Current behavior
I'm changing the query param and my app goes blank, suspends and renders the new data with a scroll reset (worst case).

Desired behavior
I'm changing the query parm, partial cache match, the stale data remains on screen, fetch in the background, data is replaced. No scroll reset, no suspending.

Reproduce
Go to sample repo. Scroll down, click on a button. Wait for the scroll reset, see the green screen (pending component). I want to get rid of both (green screen + scroll reset)
StackBlitzfmart
Run official live example code for Router Basic React Query File Based, created by Tanstack on StackBlitz
data-fetching-in-loader - StackBlitz
Was this page helpful?