TanStackT
TanStack•3y ago•
2 replies
sad-indigo

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>
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!</>
}


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
Was this page helpful?