useQuery vs useSuspenseQuery
I'm having a hard time understanding in what's the main difference between
useQuery and useSuspenseQuery? For example I prefetch one endpoint at page.tsx, considering that prefetch will prefill the cache then what will happen if I call useQuery instead on useSuspenseQuery?
Also if a component is using useSuspenseQuery for some data, then how to invalidate that and fetch new data from some other component? With useQuery we do have invalidate function that I can call!9 Replies
useSuspenseQuery handles the interaction with suspense boundaries
– React
The library for web and native user interfaces
I understand that, but my question is specifically regarding to the default template for t3 app. We are using
useSuspenseQuery but there is no suspense boundary around! Also we are prefetching the request with void which wont wait for the request to succeednext has implicit suspense boundaries
(app dir)
But isn’t suspense boundary is only created when we add loading.tsx?
there should be some level of streaming with suspense, otherwise the page will be awful
you can always not use suspense queries and do full side client queries
So if I prefetch on the server and use suspense query in the client, then I do need to wrap that component with suspense for it to show loaders?
Advanced Server Rendering | TanStack Query React Docs
Welcome to the Advanced Server Rendering guide, where you will learn all about using React Query with streaming, Server Components and the Next.js app router.
You might want to read the Server Rendering & Hydration guide before this one as it teaches the basics for using React Query with SSR, and Performance & Request Waterfalls as well as Pre...
I’ve gone through this, but as I said it’s kinda unclear for me!