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

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/react-router": "0.0.1-beta.214

- Tanstack Query:

@tanstack/react-query": "^5.8.7

@tanstack/react-query": "^5.8.7

TanStack•3y ago•

2 replies

sad-indigo

React Suspense with react-query and router

useSuspendedQuery

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

@tanstack/react-router": "0.0.1-beta.214

@tanstack/react-router": "0.0.1-beta.214

- Tanstack Query:

@tanstack/react-query": "^5.8.7

@tanstack/react-query": "^5.8.7

React Suspense with react-query and router

Similar Threads

React Suspense with react-query and router

Similar Threads

Similar Threads

Similar Threads