RTK-Query
Powerful data fetching & caching tool for Redux
Crash Course!
What
What is RTK Query
Powerful data fetching & caching tool to simplify common cases & eliminate the need to hand-write the logic yourself"
Redux Toolkit Stats
No | Item | Description |
---|---|---|
1. | Total Commits | 1,043 |
2. | Last Commit | 3 hours ago |
3. | Opened Issues | 78 out of 831 |
4. | Opened Pull Requests | 17 out of 554 |
5. | Total Stars | 6.2k |
6. | Total Fork | 473 |
7. | First Public Release | 24 Dec 2018 (v0.3.0) |
8. | Latest version | v1.6.1 |
Contributers
Why
Motivation
Creator of Redux
Motivation
Redux rules:
- Make immutable operations to modify state
- Derive new state based on dispatched action
- No asynchronous logic or 'side effects'
Redux knows to synchronously dispatch actions, update the states and notify the UI that something changed. However, any asynchronous operations have to happen outside the store.
RTK Query
RTK Query is an optional addon included in Redux Toolkit (RTK) and its functionality is seamlessly integrated in the RTK API.
- Tracking loading state to show UI spinners
- Avoiding duplicate requests for same data
- Optimistic updates to make UI feel faster
- Managing cache as user interacts with UI
Solve common data fetching behaviors:
Comparing Data Fetching & Caching library
Item | React Query | SWR | Apollo Client | RTK-Query |
---|---|---|---|---|
Last Commits | 9 hours ago | 24 hours ago | 9 hours ago | ❤️8 hours ago |
No of Commits | 1,325 | 450 | ❤️ 9,932 | 1,049 |
No of Stars | ❤️ 22.5k | 18.9k | 16.7k | 6.2k |
First version | 11 Sept 2019 | 30 Oct 2019 | ❤️ 14 Apr 2016 | 7 June 2021 |
No of Issues ( Opened / Closed ) |
77 / 763 | 47 / 418 | ❤️ 345 / 3,507 | 77 / 763 |
No of PR ( Opened / Closed ) |
11 / 755 | 15 / 467 | ❤️96 / 4,449 | 17 / 541 |
Platform Requirements | React | React | React, GraphQL | Redux |
Supported Query Syntax | Promise, REST, GraphQL | Promise, REST, GraphQL | GraphQL | Promise, REST, GraphQL |
Supported Query Keys | JSON | JSON | GraphQL Query | JSON |
Change Detection | Deep Compare (Stable Serialization) | Shallow Compare | Deep Compare (Unstable Serialization) | Referential Equality (===) |
API Definition | On-Use, Declarative | On-Use | GraphQL Schema | Declarative |
NPM Trends Data Fetching & Caching library
- ✅ 1st-class, built-in, and ready to use with no added configuration or code
- 🟡 Supported, but as an unofficial 3rd party or community library/contribution
- 🔶 Supported and documented, but requires extra user-code to implement
- 🛑 Not officially supported or documented.
Comparing Data Fetching & Caching library
React Query | SWR | Apollo Client | RTK-Query | |
---|---|---|---|---|
Caching | ✅ | ✅ | ✅ | ✅ |
Devtools | ✅ | 🟡 | ✅ | ✅ |
Polling/Intervals | ✅ | ✅ | ✅ | ✅ |
Parallel Queries | ✅ | ✅ | ✅ | ✅ |
Dependent Queries | ✅ | ✅ | ✅ | ✅ |
Paginated Queries | ✅ | ✅ | ✅ | ✅ |
Infinite Queries | ✅ | ✅ | ✅ | 🛑 |
Bi-directional Infinite Queries | ✅ | 🔶 | 🔶 | 🛑 |
Infinite Query Refetching | ✅ | ✅ | 🛑 | 🛑 |
Lagged Query Data | ✅ | 🔶 | 🛑 | ✅ |
Selectors | ✅ | 🛑 | ✅ | ✅ |
Initial Data | ✅ | ✅ | ✅ | ✅ |
Scroll Recovery | ✅ | ✅ | ✅ | ✅ |
Comparing Data Fetching & Caching library
React Query | SWR | Apollo Client | RTK-Query | |
---|---|---|---|---|
Cache Manipulation | ✅ | ✅ | ✅ | ✅ |
Outdated Query Dismissal | ✅ | ✅ | ✅ | ✅ |
Render Batching & Optimization | ✅ | 🛑 | 🛑 | ✅ |
Auto Garbage Collection | ✅ | 🛑 | 🛑 | ✅ |
Mutation Hooks | ✅ | 🟡 | ✅ | ✅ |
Offline Mutation Support | ✅ | 🛑 | 🟡 | 🛑 |
Prefetching APIs | ✅ | 🔶 | ✅ | ✅ |
Query Cancellation | ✅ | 🛑 | 🛑 | 🛑 |
Partial Query Matching3 | ✅ | 🛑 | 🛑 | ✅ |
Stale While Revalidate | ✅ | ✅ | ✅ | ✅ |
Stale Time Configuration7 | ✅ | 🛑 | 🛑 | ✅ |
Comparing Data Fetching & Caching library
React Query | SWR | Apollo Client | RTK-Query | |
---|---|---|---|---|
Pre-usage Query/Mutation Configuration | ✅ | 🛑 | 🛑 | ✅ |
Window Focus Refetching | ✅ | ✅ | 🛑 | ✅ |
Network Status Refetching | ✅ | ✅ | ✅ | ✅ |
General Cache Dehydration/Rehydration | ✅ | 🛑 | ✅ | ✅ |
Offline Caching | ✅ (Experimental) | 🛑 | ✅ | 🔶 |
React Suspense (Experimental) | ✅ | ✅ | 🛑 | 🛑 |
Abstracted/Agnostic Core | ✅ | 🛑 | ✅ | ✅ |
Automatic Refetch after Mutation | 🔶 | 🔶 | ✅ | ✅ |
Normalized Caching | 🛑 | 🛑 | ✅ | 🛑 |
Comparing Data Fetching & Caching library
How
Overview Concept
Setup
> npm install @reduxjs/toolkit redux react-redux
1. Add the Redux Toolkit and React-Redux packages to your project:
// app/store.js
import postsReducer from '../features/posts/postsSlice'
import usersReducer from '../features/users/usersSlice'
import notificationsReducer from '../features/notifications/notificationsSlice'
import { configureStore } from '@reduxjs/toolkit'
export default configureStore({
reducer: {
posts: postsReducer,
users: usersReducer,
notifications: notificationsReducer,
}
})
2. Create an Redux Store
Setup
3. Provide the Redux Store to React
Create a Counter state
4. Create a redux state api
Create a Counter state
5. Add API slice to Store
Use Redux State & Actions
import { useGetPostsQuery } from '../api/apiSlice'
export const PostsList = () => {
const {
data: posts,
isLoading,
isSuccess,
isError,
error
} = useGetPostsQuery()
let content
if (isLoading) {
content = <Spinner text="Loading..." />
} else if (isSuccess) {
content = posts.map(post => <PostExcerpt key={post.id} post={post} />)
} else if (isError) {
content = <div>{error.toString()}</div>
}
return (
<section className="posts-list">
<h2>Posts</h2>
{content}
</section>
)
}
let PostExcerpt = ({ post }) => {
return (
<article className="post-excerpt" key={post.id}>
<h3>{post.title}</h3>
<div>
<PostAuthor userId={post.user} />
<TimeAgo timestamp={post.date} />
</div>
<p className="post-content">{post.content.substring(0, 100)}</p>
<ReactionButtons post={post} />
<Link to={`/posts/${post.id}`} className="button muted-button">
View Post
</Link>
</article>
)
}
Demo
Resources
Websites
Comparison Page
RTK-Query: data fetching & caching tool for Redux
By Wan Mohd Hafiz
RTK-Query: data fetching & caching tool for Redux
- 570