Next.js Discord

Discord Forum

Update query param without page reload

Unanswered
Yacare Caiman posted this in #help-forum
Open in Discord
Avatar
Yacare CaimanOP
https://stackblitz.com/edit/stackblitz-starters-pgnz3c?file=app%2Fpaginator%2Fpaginator.tsx&view=editor

So in the repo above I basically have...
-> an api route that sleeps for 2s before returning data
-> a <Paginator /> component that fetches data based on the query params (using react-query)
-> and buttons that update the query params

When a button is clicked the url is updated immediately but the ui isnt updated until after 2s
-> the <Suspense /> fallback in page.tsx isnt displayed
-> nor is the isLoading flag updated by the useQuery hook

I've tried using router.push, router.replace, window.history.pushState but none of these seem to trigger the suspense / loading stuff

Any ideas where I'm going wrong?

2 Replies

Avatar
Yacare CaimanOP
Image
Avatar
Yacare CaimanOP
Looks like I can at least detect the loading state by wrapping the button handlers in useTransition()
but still wondering if theres a way to get Suspense / useQuery().isLoading to work