T
TanStack•2y ago
genetic-orange

React Suspense with react-query and router

Hello! I'm trying to use react-query and router together with React suspense. The idea being, when a user switches to another page, the page suspends until all queries of that pages component have completed using useSuspendedQuery. I created the QueryClient in the application root and pass it down using the QueryClientProvider. I then included a 
<Suspense fallback={<Loader/>}>
  <Outlet/>
</Suspense>
<Suspense fallback={<Loader/>}>
  <Outlet/>
</Suspense>
in my UI wrapper to accomodate for the router outlet and the suspense that should suspend when the pages below are fetching. I then had a simple component 
export default function Example() {
    const query = useSuspenseQuery({
        queryKey: ["test"], queryFn: async () => {
            await new Promise((resolve) => setTimeout(resolve, 6000))

            return {"hello": "world"}
        },
    })
    return <>Hello world!</>
}
export default function Example() {
    const query = useSuspenseQuery({
        queryKey: ["test"], queryFn: async () => {
            await new Promise((resolve) => setTimeout(resolve, 6000))

            return {"hello": "world"}
        },
    })
    return <>Hello world!</>
}
Which will run a query which will suspend for 6 seconds to simulate a real query. However, the suspense does not actually suspend. The component will halt to render until the 6s query has returned, but there will be no loading animation. Versions: - React / React DOM: 18.2.0 - Tanstack Route: @tanstack/react-router": "0.0.1-beta.214 - Tanstack Query: @tanstack/react-query": "^5.8.7
2 Replies
rare-sapphire
rare-sapphire•2y ago
I think with routers you'd want to let the route loader handle this
genetic-orange
genetic-orangeOP•2y ago
I got it halfway working by just putting the Suspense at the top of each route component. Not beautiful but works

Did you find this page helpful?