RTK Query is a robust data fetching and caching tool. It is designed to simplify common cases for loading data in a web application, eliminating the need to hand-write data fetching & caching logic yourself.
As a developer, you must know that apart from making API calls to build an application, you would also require taking care of various other behaviors as well, likewise:
Tracking the loading state in order to show UI spinners.
Avoiding duplicate requests for the same data.
Optimistic updates to make the UI feel faster.
Managing cache lifetimes as the user interacts with the UI.
RTK Query can be used to handle all these behaviors along with making API calls. It has built-in data fetching and caching logic on top of Redux Toolkit’s APIs.
Why RTK Query?
While there are other tools available that can be used to solve the above problems but you should use RTK Query for the following reasons:
You already have an existing Redux application and want to simplify your API handling logic.
You want to be able to utilize the popular Redux Dev Tools extension to track the changes to your state over time since RTK Query dispatches standard redux actions once the requests are processed.
It provides you the ability to define all your endpoints in a single place and provides built-in hooks for the API calls.
Installation
RTK Query is bundled together with Redux Toolkit. So in order to set it up, you need to configure the redux toolkit first. Do note that for the course of this article we would be using a pre-defined template for setting up the React app using Vite. With that being said, let’s jump on to setting up RTK Query.
1. Set Up the Redux Toolkit
Install the @reduxjs/toolkit via yarn along with react-redux:
yarn add react-redux@8.0.4
yarn add @reduxjs/toolkit@1.9.0
2. Add Base Service for RTK Query
Let’s now add a base service for RTK Query that would be defining the base URL for the API endpoints along with a default timeout for the API calls. The baseApi uses RTK Query’s in-built fetchBaseQuery wrapper built on top of fetch for making the API calls by default.
3. Configure the Redux Store
Now that we are done defining the base service, we can configure the redux store with the reducer and middleware provided by the baseApi. This is to manage the subscription lifetimes.
4. Add the React Redux Provider
Let’s add the React Redux Provider in the main.tsx or index.tsx file for your project so that the redux context is available throughout the application.
5. Add the API Slice
Let’s now configure the API slice for calling the /users endpoint for the base URL to get the list of users. We are going to dynamically inject the endpoints as opposed to defining all the endpoints in a single file to better manage our API services. RTK Query provides support for the automated re-fetching of data by defining and invalidating tags. If an API query endpoint provides an API tag and the same tag is invalidated by another mutation then RTK Query automatically triggers a new request for the query that provided the tag.
This is pretty much the setup we need to make an API call in React. Now let’s jump on to see the useUsersQuery into the action.
6. Using the API Hook to Fetch the Data
To make an API call using the above-defined hook, we just need to add it to the UserList component defined below and it returns an object with a bunch of options like isFetching, data and error etc. We can display a loading state using the isFetching variable and once the data variable is available, we can just iterate over it to display the list of users on our page.
7. Update App File
To see the API call in action, you need to add the component inside the App.tsx file and start the server.
Conclusion
We have finally made our API call to the JSON placeholder API to get the list of users and display it on the UserList page.
As always, here is the link to the complete code on Github.
Thanks for reading. Do share your thoughts on setting up RTK Query for making API calls in React applications. Also, if you found this article useful, do consider following me on Dev and sharing this article within your circle.
Top comments (0)