DEV Community

Cover image for useSuspenseQuery
Ewan McDougall
Ewan McDougall

Posted on • Originally published at blog.mrloop.com

1 1 1

useSuspenseQuery

I was interested in how nested React <Suspense/> and TanStack useSuspenseQuery worked together. The small app below is a visualization of various combinations of <Suspense/> and TanStack Query.

The source code is available at GitHub. Using the custom <DelayedQuery/> component it is easy to compose different loading scenarios to see how they behave. Give it a try, edit and run the code at StackBlitz.

Nested shows 3 nested <Suspense/>, and within each <Suspense/> a useSuspenseQuery is run. The fetches run in serial. The loading state for the first query is shown, then when that is loaded the loading state for the second query and then when that is loaded the loading state for the third query is shown.

Parallel shows a <Suspense/> containing 3 useSuspenseQuery, with 2 fetches taking 1 second and 1 fetch taking 2 seconds. A single loading state is shown until the last query finishes after 2 seconds.

Cached shows two variations. The first variation Fast load first show a <Suspense/> containing 3 useSuspenseQuery as in the Parallel example but in this case all the queries use the same cache key. They are making the same request and can make use of the cache. The first request will take 4 seconds, the second will take 10 seconds and the third will take 10 seconds. A single loading state is shown until the first 4 second request completes, the other queries don't attempt to make a query but instead wait for the first query to run that has the same cache key and use the cached result. All results are displayed after 4 seconds.

The second variation Slow load first is the same as Fast load first but the order of the queries is changed, in this case the first request will take 10 seconds, the second request will take 4 seconds and the third request will take 10 seconds. A single loading state is shown until the first 10 second request completes, the other queries don't attempt to make a query but instead wait for the first query to run that has the same cache key and use the cached result. All results are displayed after 10 seconds.

SurveyJS custom survey software

Simplify data collection in your JS app with a fully integrated form management platform. Includes support for custom question types, skip logic, integrated CCS editor, PDF export, real-time analytics & more. Integrates with any backend system, giving you full control over your data and no user limits.

Learn more

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more