DEV Community

Cover image for πŸ“š RTK Query Tutorial (CRUD)

πŸ“š RTK Query Tutorial (CRUD)

Raynaldo Sutisna on November 29, 2022

β˜€οΈ Introduction Finally, I have a chance to continue my Redux blog series. If you haven't read it, I suggested to read the first blog fi...
Collapse
 
yanwongpyw profile image
Yan Wong • Edited

Thank you so much for this. Will there be content introducing error handling while using mutation with RTK query?

I tried to log the result inside a useEffect like below but the result.isSuccess and result.isError is always being false, even when the data is created and invalidated successfully. What could be the issue?

const [createAlbum, result] = useCreateAlbumMutation()
useEffect(() => {
console.log(result)
}, [result]);

Collapse
 
raaynaldo profile image
Raynaldo Sutisna

Hi @yanwongpyw , thank you for your comment.

Are you trying to make the isError to be true? I think you can try to update the URL of the mutation to be the wrong URL, I believe the error handling will be working.

Also if you are using RTK Query you don't need to use UseEffect for checking the data. RTK Query has their own dev tool.
github.com/reduxjs/redux-devtools

Image description
You can check the status from there.

Collapse
 
balderasba profile image
Yehya

Tnks its very useful and best then RTK Query docs.

Collapse
 
wa77gdc profile image
wa77gdc

Great job , best description about rtk query.

Collapse
 
hhelsinki profile image
hhelsinki

Thank you Ray, I'm handling the error state, now I'm kinda find some idea to hack :)

Collapse
 
rakeshgr94 profile image
rakeshgr94

Good blog Ray. We will except more on RTK query

Collapse
 
aldobangun profile image
Aldo Bangun

Thanks for the content. Great Job Sir!

Collapse
 
belloshehu profile image
Bello Shehu • Edited

Following your tutorial, I am trying to use RTK Query to in todo application. However, an error pops up anytime I import the RTK Query's auto-generated hook into a component.

enter image description here

Collapse
 
raaynaldo profile image
Raynaldo Sutisna

which step is it? I'm not sure if I can debug from this error.

Collapse
 
eduardoklein profile image
Eduardo Klein

Great job! I will just left here a quick fix to do.

When you mentioned "We can also make the parameter to be an object and use a spread operator to access the attribute easily". I think what you would like to say is "destructuring assignment" instead of "spread operator" (in regards the below snippet)

Image description

Again, good job!

Collapse
 
raaynaldo profile image
Raynaldo Sutisna

Thank you @eduardoklein . Good catch. Appreciate your feedback.

Collapse
 
singhanuj620 profile image
Anuj Singh

Can someone explain me more about the tags ? invalidate tags, provided tags etc

Collapse
 
raaynaldo profile image
Raynaldo Sutisna

Hey sorry for late response. the purpose of tags is to validate the data. Because we are getting caching data in RTK Query rather than fetching to API all the time.

Provided Tags initializes the tag name when we need to invalidate the data.
Invalidate Tags will trigger the tag name is provided.

We will use provided tags in Query, and invalidate invalidate tags in mutation.

Collapse
 
ryc66 profile image
Raees Farooq

What about authorization token and refresh token, How can we handle that ?

Collapse
 
piyushkadam5 profile image
Piyush Kadam

Hey @ray do you have any idea about testing this RTK query in Jest ,
how do we mock the api calls in it ?

Collapse
 
katyi profile image
Alexandra Egorova

Thanks for the great explanation, it’s very helpful πŸ™πŸ‘©πŸ»β€πŸ’»

Collapse
 
shahrukh131 profile image
SHAHRUKH AKIB

how to add multiple reducers along with multiple middleware in a store when using RTK query?

needHelp

Collapse
 
im_om_meher profile image
Onkar Meher

Thank you for your insightful explanation on RTK Query, Ray. Your knowledge-sharing is greatly appreciated.

Collapse
 
i_m profile image
I M

(1). How to store all API call responses in redux store?
(2). How to set authorization token common in header for all API?
(3). How add new middleware in store for new createdApi?

Collapse
 
drkcode profile image
drkcode

Thank you for sharing. I'm learning a about rtk.