React Query - Complete Tutorial

[@cosdensolutions]

Hope you enjoyed the video! I also have a really cool and unique course that will teach you way more than this video. You'll learn how to build an actual complex project with React. It's called "Project React" and you can find it at cosden.solutions/project-react. Also, I have a free weekly newsletter called "Import React" with tutorials, news, and cool stuff about React! You can sign up at cosden.solutions/newsletter?s=ytc

[@akashddeepchitransh4537]

Before I found your channel I used to find the longest video to learn something, but now I search for your videos, it really saves my time alot.

[@morchellemusic2829]

I wish all the tutorials were like this, straight to the point! Sometimes you gotta watch 1 hour for 20 minutes of information. Great work, just subscribed!

[@cosdensolutions]

yeah, that's my goal!

[@rameezh88]

I've watched a couple of your videos. Always to the point and exactly the knowledge I need to understand, feel confident, and get started. Thank you!

[@SuperYoda7]

you explain it in such a clear and simple yet concise way that even I understand it perfectly. please do something on trpc if you haven't already.

[@DiogoScarmagnani]

Great video! Another way you can refetch the data is just destructuring `refetch` prop from the return of `useQuery`, then you can invoke `refetch()` inside the `onSuccess` function of `useMutation`, making unnecessary to import `useQueryClient`.

[@ammaraateeb1914]

Concise, pointed and fundamental information. Done better than the rest. *subscribed* to support hard working creative individuals

[@cosdensolutions]

means a lot, thanks! 🤙

[@MagedMegz95]

I recently discovered your channel, and I cannot state enough how much I like your approach. No BS, just straight to the point with the information that's both useful and practical. Love it!

[@lateefmushtaq6059]

I have learnt 80% of the react /ts from your videos, but i find this video very informative in just 18 minutes making this video a bit complicated.

[@gaganyt7861]

This tutorial of react query is king of all tutorials in the youtube more concise and excellent explanation, i think even chatgpt cant explain this much concisely Subscribed and love to eatch evey video of yours

[@cosdensolutions]

damn, thank you!

[@fabryscript]

Thanks a lot for the informative video, straight to the point and without excessive clutter!

[@SonuKumarTech]

I am becoming a fan of your teaching style. First i watched your redux video and now i am not watching any other redux tutorial. because that video is so straightforward and to the point. please keep on adding videos like this. already subscribed:) 👍

[@_tanzil_]

Nice and concise. No nonsense and unnecessary lingering. 👍 SUBSCRIBED

[@chhavimanichoubey9437]

you are simply amazing, subscribed, not to mention i want to highly emphasize on reading docs, they mention each feature properly, so if someone have issues, kindly check docs, it almost always helps.

[@shahzaibkhan5423]

Amazing ! Everything about React Query in just one video. Thank you very much sir

[@developer825]

I like your comprehensive approach and clear explanations. Thank you for the tutorial.

[@RonnieDenzel]

Thanks for another important react video,concise and straight to the point,already subscribed

[@priyanshugupta4875]

great video, cant believe you did it in 18 minutes

[@Pareshbpatel]

React Query, so clearly explained. Thank you. {2024-04-14}, {2024-06-03}

[@persas1683]

Thanks so much! Your tutorial is extremely clear and comprehensive.

[@EpistemicFomo]

Concise and simple explanation! Thank you!

[@cosdensolutions]

Glad you enjoyed it! 🤙

[@jimtaika2572]

aaaaah my eyes!! Blinded for couple of seconds. Good content, subscribed

[@cosdensolutions]

yeah will work on that, my bad!

[@blaqhakym]

😊 You got me when you said "over 30% of you are not subscribed". I quickly tapped the subscribe button immediately. Thanks for the amazing content bro

[@cosdensolutions]

Hahaha thanks a lot! ☺️

[@srikanthracharla420]

Subscribed, this is what I am looking for 🔥

[@Ranjeetvishwakarma-72]

Amazing Exaplantion , Any beginer can understand these topic very well 🔆🔆

[@serkan1804]

Many thanks, I always find your videos really helpful.

[@devvagnerBR]

the best video about react query that i found, thx for that 💚

[@franklinmayoyo]

You guy! You have every piece of knowledge I need. ❤

[@astro-diego]

Concise and helpful. Nice explanation about React query. Thanks a lot!

[@d3215k]

Thanks. Your tutorial is very helpful. Hopefully there will be some regarding Tanstack routers too

[@imamdroubi6537]

There are videos that you feel guilty if you didn't leave a comment on them thanking the creator , this is one of them Thanks a lot man

[@cosdensolutions]

thank you for the kind words!

[@floyd0987]

You're just brilliant! I'd like to see a tutorial on Apollo Client... the way you explain code is extraordinary

[@adeemmmm]

Thank you for having a tutorial for everything

[@Mainak908]

Awesome man❤❤...u r doing a good work...keep it up

[@Di-yes]

Love this library. Really useful one for sure.

[@johnacsyen]

Well explained. Thanks for the time to make this tutorial.

[@MrTouqeerhameed]

Nice and short with full of information ✌

[@Shaheer-xs5os]

Highly valuable! thank you for this video!

[@syedismail4896]

12:14 when query is invalidated, it marks as stale but it doesn't immediately refetch them, it relies on conditions like component re-renders etc to trigger the actual refetch. Sequence of events: 1) on button click, mutation function is called. 2) on success: the query is marked as stale. (which causes internal state change in useQuery which is also a reason for re-render) 3) setTitle("") causes a re-render 4) component renders and react-query sees the stale query while rendering 5) refetch happens

[@maximemondello6174]

Subscribed ! exactly what I need to start using the lib ! thanks ;)

[@oscardasilva971]

Excellent explanation 👏

[@bake-holmes]

Your videos are very helpful, thank you !

[@dudeyouhavenoidea]

Lol, The Subscribe part made me subscribe, nice

[@mdkawsarislamyeasin4040]

Awesome simple example and great tutorials

[@xyz9714]

It's really easy to learn things with your nice way of explaining. Can you also talk about state management with react-query and if it's possible to replace redux with it?

[@toddd5890]

very very clean tutorial thanks a lot bro

[@Murph709]

Great tutorial!

[@KnownTechnical]

This helps lot to me brother. subscribed you

[@claudioparra8507]

just what I needed thank you!

[@chinmayghule8272]

I have to say here that this tutorial wasn't noob-friendly at all. I mean, you didn't even explain the difference between query and mutation. For those who don't know, query here means getting the data i.e. a GET request, while a mutation means mutating/changing the data i.e. a POST/PUT/DELETE request.

[@brokegod5871]

If you are learning a library like React Query without even knowing what query/mutation and all those are, that clearly means you don't even know how normal fetching and all works and why React Query exists in the first place. Riding the hype train much?

[@MohammedAli-p7e9d]

​@@brokegod5871 yea, I feel like I am missing something in my learning journey about fetching data. Can you recommend me some resources please?

[@vaysberg_]

Great video, thank you ❤. One question on my mind... what is the point of using state manager if this library provides such incredible possibilities for customizing cache? I just watched the video, I will think about it myself, I just want to know feedback from experienced people who have worked with this library.

[@ai-yw3zn]

I'm doing the same as you. Can you show me the folder structure like the video you made so I can follow along and understand it easily when I learn about it?

[@SarahAyuNanda-qr6bm]

thanks a lot, and i wonder what extension you use so your next code will be auto shown while you're typing

[@satellitesage2487]

I had a hard time getting the expected behavior for `staleTime: Infinity`. I accidentally placed the instantiation of query client inside of the component, hence, it was always refetching even though I've set the staleTime to Infinity.

[@hesam-init]

react query changed my life :0

[@cosdensolutions]

Same

[@bhargavkumar]

How to fetch data on the server and then show it to the client in Nextjs app router using Tanstack Query.?

[@cosdensolutions]

that's a bit more complicated. it's still a work in progress last I've heard

[@arpithagm2231]

is onSuccess being deprecated from useInfiniteQuery? If so, what is the alternative for onSuccess?

[@arnauddsj-monagencecreative]

very well explained thanks a lot

[@TheMikkelet]

On react native, does it cache with persistent storage or just from ram? If I enable cache and kill the app, will it refetch?

[@syedmusab2372]

Worthy video ❤

[@lumierre0791]

Very straightforward tutorial! Can I use the React Hook form and React Query at the same time or is it recommended just the React Query only? What combinations would you recommend? Let's say I'm gonna use the Laravel/Express as my backend.

[@cosdensolutions]

You can definitely combine the two. React Query is async state management, and RHF is form management, so they do different things. But you can use the result of RHF submit to update RQ query cache and see your data, or trigger a refetch by invalidating the cache

[@lumierre0791]

@@cosdensolutions thank you sir, hoping you can have a tutorial on how to combine these two. Thank you

[@nawazishali274]

Hi Cosden can you tell about react query useQuery onSuscess has been depricated in latest version of react query ..what's it alternative ?

[@stevebuonincontri6853]

what copilot plugging are u using - Im in webstorm

[@CodeHassanX]

amazing videos, thanks

[@eedelson1030]

What autofill extensions are you using? They look extremely helpful. I kept watching and answered my own question. Copilot. This tutorial was so helpful!

[@cosdensolutions]

Haha there you go☺️

[@bardhokajvazi2726]

Somehow using the onSuccess of useMutation with the useQueryClient doesn’t work. Do you have an idea why ?

[@muhammadaamirkhan9185]

Does Reactquery Fn() executed again and again on every render if no taleTime is set? or it will first execute on the mount and then cache that data, and then on every render it will show the cached data ?? anyone please guide.. I am cleared that on first mount the queryFn data will be cached and then on every mount the cached data will be shown without executing the queryFn . (when taleTime is set to Infinity).. But my question is regarding rendering ..

[@narayanapudoor9321]

Awesome video. Thanks

[@alexandrefortes4571]

There is any video explaining prefetchQuery ?

[@micostco]

Amazing tutorial.

[@suzanne_atkinson]

How do you access a cache from a nested child? I have a success Modal that writes new data to the database at the end of series if interactions. Because it’s a patch request I have to provide the full nested array plus the new item. How do I access the original data from deep within a nested react app? Is that a. Refetch?

[@cosdensolutions]

You'd have to use the query key to get the cache. There are functions in the documentation that allow you to do that! Everything goes by the query key so as long as you have that, you can get all the data

[@joeblack8843]

jo, your vscode theme is slick. I like how the code is poping out. whats the name of it?

[@ryuusha5339]

thanks, i tried using it for data deletion, but if I try to delete multiple data , the invalidate queiy only triggers for the first time: the onsuccess function is triggered every time but invalidate only works for the 1st time, anyone know the solution for my problem?

[@andreenoviyandy8614]

is there any consideration you don't call refetch function from usequery into onSuccess useMutation instead of using useQueryProvider invalidate queries?

[@cosdensolutions]

because that query might also be used in another component somewhere else in the app, and that one should also be invalidated as well to get the latest data! Calling refetch here would only apply to this component

[@RajGupta-cu9hi]

In React query 5 ,how to handle onSuccess ,onError 😢

[@fahadabbas5252]

Is cacheTime deprecated in latest react Query? because when i type "s" it suggests staleTime but when i type "c" it doesn't show any suggestions also using cacheTime : 0, it still stores everything in cache.....

[@cosdensolutions]

yeah, it got renamed to gcTime for garbage collection time!

[@jay-kv6wn]

Excellent video

[@johndoe4016qweasd]

Awesome! Thank you!

[@javierlimontaneyra2637]

Hi. Thanks a lot for this video. Very clean, informative and objective. It's possible to explain in a video an example o a simple explanation of the use of GraphQL Subscriptions using React-Query??

[@MikeNeder]

GraphQL and React-query in the same app? is that necessary?

[@javierlimontaneyra2637]

@@MikeNeder Yes.

[@Vlad-gr9ds]

What is the extension which gives inline "You 3 hours ago Initial commit"?

[@cosdensolutions]

git lens

[@aymanechaaba]

How do you revalidate data when we're fetching on rsc?

[@stevebuonincontri6853]

do u have the source code public? U did not show us the TodoCard code and the Todo code

[@ksjazzguitaryt]

Why does search need to be an object in the query key. Why is it `["todos", { search }]` instead of `["todos", search]`?

[@cosdensolutions]

if you only ever will need the search, no need for object. But usually, you have search, limit, offset, etc. so object makes more sense

[@nitay2870]

what about axios libary also great

[@ronitmitra3144]

Simple ND TO THE POINT

[@vellankiindeevar5530]

bro make a tutorial about react table also . you make things really through . plzz

[@mammad_mpk1309]

clean and contentfull

[@fernandosoaresdev]

Hello! What ChatGPT extension are you using?

[@cosdensolutions]

copilot!

[@chiragagrawal3501]

Can someone tell me the extension name that provides code suggestion, like in the video above.

[@cosdensolutions]

github copilot

[@Drayken]

Probably should've included parts for: useQueries, dependent useQuery and dependent useQueries.

[@regilearn2138]

teach us how to use redux toolkit and Tanstack query together

[@alyu6351]

a senior developer in 19min? I'm in

[@joenguyen8204]

awsome, good stuff

[@pointer333]

When you're conducting a tutorial, and you realize you haven't breathed once in 5 minutes straight, you need to slow down. It's like you're racing to finish. At that point, it's a "hurried demo" at best.

[@Ryku_Prime]

What theme are you using?

[@cosdensolutions]

Material theme darker

[@Ryku_Prime]

@@cosdensolutions Thank you!

[@thothhermes7270]

Thanks bro.

[@kiranm5419]

Awesome Video

[@leonardmbibi8013]

Nice one from a nice guy. Your link to 🚀Project React is not working.

[@leonardmbibi8013]

Ok, It's working now. Thanks

[@yonseungkim]

what vs code extension do you use for chat-gpt?

[@cosdensolutions]

Copilot

[@musicanon1]

Have you tutorial about rtq ?

[@cosdensolutions]

not yet