Suspense For Data Fetching with useSWR

Use it today with SWR and TypeScript

7 min readNov 29, 2020

Suspense For Data Fetching

Suspense for Data Fetching is an experimental feature in ReactJS. It allows us to “wait” for some code to load, and to declare a loading state while we are waiting. useSWR is a library that takes all the complexity out of data fetching and data caching in React applications. useSWR also supports React Suspense for data fetching.

If you are unfamiliar with useSWR, be sure to check out our previous article on the subject.

useSWR — My New Favorite React Library

Make the hard things easy with React’s best data fetching library

medium.com

Getting started

Let’s start by creating a brand new Create React App. Run the following command.

npx create-react-app --template typescript suspense-swr

After it finishes installing our dependencies and bootstrapping our application, cd into the directory and run yarn add swr.

For this tutorial, we will use Tailwind. For some projects like this, I like to use Tailwind with the CDN. To use Tailwind’s CDN with create react app, simply add the link to the head of your public/index.html.

Now that we have all of our dependencies, we can get started and build this thing.

Writing our hook

We will create a hook using useSWR that returns a user’s profile demo. For the purpose of this tutorial, we will use mock data instead of using an API.

Our mock data

Above you can see our mock data. Now that we have our mock data, we can write our hook.

Above is our hook. We wait 1.5 seconds to simulate network loading and then return our mock profile data.

Notice how we had to create my own TypeScript interface that extends SWR’s response interface? We have to do this because the typings for SWR define data as optional. However, when you are using suspense, the data is not optional, it’s always there. So we need to cast our response to this custom interface to “correct” the typings.

Using our hook

Now that we have defined our hook, we can create our Profile component. We created this component using the Card example in the tailwind docs. Take a look at the code below.

As you can see, our profile data is always defined in this component, we do not need to check for null or to present a loading state.

Below is a screenshot of our Profile component with our mock data. It’s amazing how quickly and easily we can make components using Tailwind’s utility classes.

What our Profile looks like

Next, let’s define a component called ProfileSkeleton. This component will be shown to our users while our data is fetching.

Our ProfileSkeleton is similar to our Profile component, except we replace the profile image with a div with bottom padding. Below you can see a screenshot of our Skeleton component.

What our ProfileSkeleton looks like

Putting it together

Now that we have our data fetching hook, our Profile component, and our Skeleton component, we can put it all together.

Our application in action!

NOTE* NextJS users will need to check if they are on the server before rendering a Suspense element, as React-Dom-Server does not yet support suspense. Below is an example of using Suspense with NextJS.

NextJS example

That’s it! If you would like to see all the code, you can check it out on Github.

Thanks for taking the time to read this tutorial and for continuing to support Frontend Digest. As always, be sure to let us know in the comments if you have any questions.