Stale UI when refetching data with useSuspenseQuery #7981
Unanswered
horaklukas
asked this question in
Q&A
Replies: 1 comment 4 replies
-
took me a while to see that you're using pages router. Not sure how well their router integrates with suspense. Everything works fine is we move the value to a normal |
Beta Was this translation helpful? Give feedback.
4 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
Hi,
I'm quite stuck with usage of
useSuspenseQuery
inside Next.js app. I isolated my issue into the Stackblitz demo.There is a component
DataView
which fetches data withuseSuspensQuery
. Data depends on parameter selected from the list of options. The state where parameter is stored is a URL query param. Select is a controlled component.When I select an option for the first time, it is stored in the URL, propagated through the component tree and displayed in the select. Data view is suspended and fallback from the wrapping
Suspense
is displayed.And now my issue is: when I change a parameter, it is propagated to the query and new fetch is triggered,
DataView
component is suspended but sibling UI is not updated until the query finish 😕 it means that when I select new parameter in selected, it appears in the URL, but there is a stale value in the select. Why is that happening although it's a UI next to the Suspense boundary, not inside it?<main key={value}>
it helps, but for the cost of first loading the data and display loader again..All is done on client, with
Next.js 14.2.6
Tanstack React Query - 5.52.2
Here is the demo
https://stackblitz.com/edit/tanstack-query-3vluww?file=src%2Fpages%2Findex.tsx
Thanks for any help 🙏
Beta Was this translation helpful? Give feedback.
All reactions