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

RTK-Query, React-Query, SWR, Apollo-Client

Articles

Comparison Page