Using SWR for Easy API Calls in React

Table Of Contents

Introduction

React gives us the ability to create powerful and scalable apps. We need to quickly implement API calls to get our data displayed in our App for them to run. That’s where SWR comes in handy.

SWR

My company embarked on a journey to create a new app for stakeholders. This included React for the frontend. Since then, I’ve been working on some React side projects to reinforce my learning from work. I struggled to use some built-in hooks to no avail. Then came SWR, which was mentioned as a way to do API calls in our work app. After integrating SWR into one of my side projects, I am sold.

SWR is a react library used for easily fetching information from an API endpoint. SWR stands for “stale while revalidate.” According to their site, they derive the name from the practice of invalidating the cache. They use the cache to return data then send the fetch request to get up-to-date data. This makes sense seeing how the library seems to fetch data without user intervention.

I was impressed seeing what is essentially a stream of data on my app as the data seamlessly updating when adding data. Plus, it’s lightweight and easy to implement. It also boasts some features over the built-in useEffect hook as it also passes in errors for better exception handling and a more seamless experience maintaining the code.

Example

I’ll take us through how I implementedSWR it into my app. I already have a React app, and I ran the install for SWR detailed below.

npm install swr

Once that finished installing, I went to work. The first thing was to import the useSWR function into one of the components.

Example import statement

Next was a simple fetcher function, taken right out of their docs.

Create fetcher function

Some notes about the fetcher. SWR takes in any fetcher object you want to pass to it. You can utilize libraries like unfetch, Axios, or GraphQL. I used the native fetch as I don’t have any unique logic running, and I am only returning simple JSON objects. So I configure it to use JSON for returning the data.

SWR has three states for the data returned, Loading, Ready, and Error. These states can be used for exception handling or creating logic for loading behavior.

The last thing we want to do is use the useSWR function we imported to grab our file.

useSWR example

There are a couple of things of note within this call. First, we’re passing in the fetcher function we created earlier and the API endpoint. Secondly, we set the results as an array with data and error since we get back error data if we error out and want to store the message. Our returned data will go into the data variable.

That’s easy. React treats the return values as an object. The data can be accessed using a map() function and the data.<tag> syntax.

Data object named access

Conclusion

After some documented time experimenting, I was resigned to React’s perceived complexity. However, as I build out more and more small accomplishments, I realized React is like anything else; it takes practice and the right tools. SWR is something I’m putting into my React utility belt. I hope this helps someone who might be struggling.

-George