RTK Query
RTK Query Quick Start
:::tip What You'll Learn
How to set up and use Redux Toolkit's "RTK Query" data fetching functionality
:::
:::info Prerequisites
Understanding of Redux terms and concepts
:::
Introduction
Welcome to the Redux Toolkit Query tutorial! This tutorial will briefly introduce you to Redux Toolkit's "RTK Query" data fetching capability and teach you how to start using it correctly.
RTK Query is an advanced data fetching and caching tool, designed to simplify common cases for loading data in a web application. RTK Query itself is built on top of the Redux Toolkit core, and leverages RTK's APIs like createSlice
and createAsyncThunk
to implement its capabilities.
RTK Query is included in the @reduxjs/toolkit
package as an additional addon. You are not required to use the RTK Query APIs when you use Redux Toolkit, but we think many users will benefit from RTK Query's data fetching and caching in their apps.
How to Read This Tutorial
For this tutorial, we assume that you're using Redux Toolkit with React, but you can also use it with other UI layers as well. The examples are based on a typical Create-React-App folder structure where all the application code is in a src
, but the patterns can be adapted to whatever project or folder setup you're using.
Setting up your store and API service
To see how RTK Query works, let's walk through a basic usage example. For this example, we'll assume you're using React and want to make use of RTK Query's auto-generated React hooks.
Create an API service
First, we'll create a service definition that queries the publicly available PokeAPI.
With RTK Query, you usually define your entire API definition in one place. This is most likely different from what you see with other libraries such as swr
or react-query
, and there are several reasons for that. Our perspective is that it's much easier to keep track of how requests, cache invalidation, and general app configuration behave when they're all in one central location in comparison to having X number of custom hooks in different files throughout your application.
Add the service to your store
An RTK service generates a "slice reducer" that should be included in the Redux root reducer, and a custom middleware that handles the data fetching. Both need to be added to the Redux store.
Wrap your application with the Provider
Provider
If you haven't already done so, follow the standard pattern for providing the Redux store to the rest of your React application component tree:
Use the query in a component
Once a service has been defined, you can import the hooks to make a request.
When making a request, you're able to track the state in several ways. You can always check data
, status
, and error
to determine the right UI to render. In addition, useQuery
also provides utility booleans like isLoading
, isFetching
, isSuccess
, and isError
for the latest request.
Basic Example
Okay, that's interesting... but what if you wanted to show multiple pokemon at the same time? What happens if multiple components load the same pokemon?
Advanced example
RTK Query ensures that any component that subscribes to the same query will always use the same data. RTK Query automatically de-dupes requests so you don't have to worry about checking in-flight requests and performance optimizations on your end. Let's evaluate the sandbox below - make sure to check the Network panel in your browser's dev tools. You will see 3 requests, even though there are 4 subscribed components - bulbasaur
only makes one request, and the loading state is synchronized between the two components. For fun, try changing the value of the dropdown from Off
to 1s
to see this behavior continue when a query is re-ran.
Last updated