Power of SWR with React
In this article, we’ll be looking at a new way of retrieving data in React Apps named SWR. This is a set of hooks for remote data fetching that makes things easier, such as caching, pagination and so on.
Throughout the article, we’ll be building a small React application to demonstrate some primary but amazing capabilities of the SWR library. The application will fetch and display the planets list of the Solar System.
Following is the Git repository, where the finalized demo application resides.
I have configured a simple NodeJS Express backend to fetch data. Backend code is also available in the repository, you can follow the readme file and get started.
It is important to understand that SWR is not a data fetching library. It can be used as a wrapper around the Fetch API and data fetch libraries like Axios to enable more functionalities like caching and pagination.
Let’s go ahead and see how SWR can be utilized to render a simple data list. First, let’s implement the API function to fetch the planets list. Axios has been used as the data fetch library.
Let’s initialize a httpClient to fetch data. Note that the backend service runs at http://localhost:8000 .
Then we can create a function with SWR to fetch data and return it to the components.
Here, useSWR hook takes two parameters as url and fetcher function. url is the path to the backend API. The fetcher function is responsible for handling data fetching. If you want to use the Fetch API for data fetching, simply replace the fetcher function with the following.
usePlanetsList returns an object that consists of three attributes. data brings out the data fetched from the API. error brings out the error object if there is an error while fetching data. In the initial phase both data and error are undefined. This has been utilized to show the loader using the isLoading attribute.
Now let’s see how to use implemented usePlanetList function to render the UI in React. In this example, I’ll be using React Bootstrap for styling.
Inside the HomePage component call the usePlanetList function as follows.
Then we can use data, error, isLoading to render components.
How SWR works is, first it checks in the cache for requested data. If the data is available in the cache, immediately return that data. Meanwhile SWR makes the network request and updates the UI if there are new data.
SWR is capable of detecting window focus and by default revalidates data on refocused. This feature can be very costly, so better to use it with caution.
A quick insight into how we use SWR in WSO2, we have implemented useRequest custom hook to which request configurations are passed.
Inside API functions we use this useRequest hook, not theuseSWR hook directly. The beauty of this approach is if we want to replace the data fetch library, we can simply update the useRequest hook. As an example, if we are going to use GraphQL we can update the useRequest hook and it’ll work seamlessly.
Final Thoughts
This article is a quick heads-up on theSWR hook. We only scratched the surface and didn’t dive deep. More functionalities such as pagination, revalidation and mutation will be discussed in upcoming articles.
Peace ✌️
