Brief note About RTK query

RTK Query is a powerful 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.

RTK Query is an optional addon included in the Redux Toolkit package, and its functionality is built on top of the other APIs in Redux Toolkit.

 

For more information, see this link. Recommend reading motivation part.

RTK Query Overview | Redux Toolkit

Features.

APIs, Create an API Slice, Configure the Store, Use Hooks in Components.

 

How to start?

RTK Query | Redux Toolkit

How it works?

#1. https://redux-toolkit.js.org/rtk-query/usage/queries

Queries | Redux Toolkit

#2 Example https://redux-toolkit.js.org/rtk-query/usage/examples

RTK Query Examples | Redux Toolkit

# Pros.

RTK Query is an advanced data-fetching and client-side caching tool. Its functionality is similar to React Query but it has the benefit of being directly integrated with Redux. 

 

# On the other side... #

RTK Query and React Query solve the exact same use case: abstracting the process of fetching data from a server, caching it, managing loading state, and deduplicating requests. There are differences in implementation and some capabilities, but you can think of it is being "two slightly different kinds of hammer" rather than "a hammer and a screwdriver". Really, you can think of React Query's own cache as being an almost identical "global store" as a Redux store, just one that's only used for the cached data use case.

 

While you don't have to use RTK Query to fetch data in this particular case, it is fine to use RTK Query here. The data kept in the cache does not need to be 100% "global", and in fact RTK Query specifically manages cache lifetimes for you so that if there are no more components that need this specific data, it will be removed from the cache.

 

Redux by itself never provided a way to handle cached data lifetimes, which was a semi-common complaint about it - "all this data lives in my store forever unless I manually write code to remove it!". Because RTK Query does handle cache lifetimes, it's entirely reasonable to use it for data that's only needed by a couple specific components, since you're assured that the data will be removed if it is no longer needed.

 

So, yes, if you already have Redux and RTK Query set up in the app, you're welcome to use it for fetching data here, and there's no need to bring in React Query or write the data fetching logic by hand. If you didn't have Redux and RTK Query set up, then it would be a good reason to consider adding React Query instead.

 

Intro of RTK query (Korean)