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
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!
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`.
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!
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
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:) 👍
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.
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
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?
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.
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?
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.
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?
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.
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.
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
What autofill extensions are you using? They look extremely helpful. I kept watching and answered my own question. Copilot. This tutorial was so helpful!
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 ..
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?
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
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?
is there any consideration you don't call refetch function from usequery into onSuccess useMutation instead of using useQueryProvider invalidate queries?
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
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.....
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??
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.
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
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.
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!
yeah, that's my goal!
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!
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.
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`.
Concise, pointed and fundamental information. Done better than the rest.
*subscribed* to support hard working creative individuals
means a lot, thanks! 🤙
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!
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.
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
damn, thank you!
Thanks a lot for the informative video, straight to the point and without excessive clutter!
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:) 👍
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.
Nice and concise. No nonsense and unnecessary lingering. 👍
SUBSCRIBED
Amazing ! Everything about React Query in just one video. Thank you very much sir
I like your comprehensive approach and clear explanations. Thank you for the tutorial.
Thanks for another important react video,concise and straight to the point,already subscribed
great video, cant believe you did it in 18 minutes
React Query, so clearly explained. Thank you.
{2024-04-14}, {2024-06-03}
Thanks so much! Your tutorial is extremely clear and comprehensive.
Concise and simple explanation! Thank you!
Glad you enjoyed it! 🤙
aaaaah my eyes!! Blinded for couple of seconds. Good content, subscribed
yeah will work on that, my bad!
😊 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
Hahaha thanks a lot! ☺️
Subscribed, this is what I am looking for 🔥
Amazing Exaplantion , Any beginer can understand these topic very well 🔆🔆
Many thanks, I always find your videos really helpful.
the best video about react query that i found, thx for that 💚
You guy! You have every piece of knowledge I need. ❤
Concise and helpful. Nice explanation about React query. Thanks a lot!
Thanks. Your tutorial is very helpful. Hopefully there will be some regarding Tanstack routers too
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
thank you for the kind words!
You're just brilliant! I'd like to see a tutorial on Apollo Client... the way you explain code is extraordinary
Thank you for having a tutorial for everything
Awesome man❤❤...u r doing a good work...keep it up
Love this library. Really useful one for sure.
Well explained. Thanks for the time to make this tutorial.
Nice and short with full of information
✌
Highly valuable! thank you for this video!
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
Subscribed ! exactly what I need to start using the lib ! thanks ;)
Excellent explanation 👏
Your videos are very helpful, thank you !
Lol, The Subscribe part made me subscribe, nice
Awesome simple example and great tutorials
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?
very very clean tutorial thanks a lot bro
Great tutorial!
This helps lot to me brother. subscribed you
just what I needed thank you!
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.
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?
@@brokegod5871 yea, I feel like I am missing something in my learning journey about fetching data. Can you recommend me some resources please?
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.
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?
thanks a lot, and i wonder what extension you use so your next code will be auto shown while you're typing
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.
react query changed my life :0
Same
How to fetch data on the server and then show it to the client in Nextjs app router using Tanstack Query.?
that's a bit more complicated. it's still a work in progress last I've heard
is onSuccess being deprecated from useInfiniteQuery? If so, what is the alternative for onSuccess?
very well explained thanks a lot
On react native, does it cache with persistent storage or just from ram? If I enable cache and kill the app, will it refetch?
Worthy video ❤
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.
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
@@cosdensolutions thank you sir, hoping you can have a tutorial on how to combine these two. Thank you
Hi Cosden can you tell about react query useQuery onSuscess has been depricated in latest version of react query ..what's it alternative ?
amazing videos, thanks
what copilot plugging are u using - Im in webstorm
What autofill extensions are you using? They look extremely helpful. I kept watching and answered my own question. Copilot. This tutorial was so helpful!
Haha there you go☺️
Somehow using the onSuccess of useMutation with the useQueryClient doesn’t work. Do you have an idea why ?
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 ..
Awesome video. Thanks
There is any video explaining prefetchQuery ?
Amazing tutorial.
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?
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
jo, your vscode theme is slick. I like how the code is poping out. whats the name of it?
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?
is there any consideration you don't call refetch function from usequery into onSuccess useMutation instead of using useQueryProvider invalidate queries?
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
In React query 5 ,how to handle onSuccess ,onError 😢
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.....
yeah, it got renamed to gcTime for garbage collection time!
Excellent video
Awesome! Thank you!
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??
GraphQL and React-query in the same app? is that necessary?
@@MikeNeder Yes.
What is the extension which gives inline "You 3 hours ago Initial commit"?
git lens
How do you revalidate data when we're fetching on rsc?
do u have the source code public? U did not show us the TodoCard code and the Todo code
what about axios libary also great
Why does search need to be an object in the query key. Why is it `["todos", { search }]` instead of `["todos", search]`?
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
Simple ND TO THE POINT
bro make a tutorial about react table also . you make things really through . plzz
clean and contentfull
Hello! What ChatGPT extension are you using?
copilot!
Can someone tell me the extension name that provides code suggestion, like in the video above.
github copilot
Probably should've included parts for:
useQueries, dependent useQuery and dependent useQueries.
teach us how to use redux toolkit and Tanstack query together
a senior developer in 19min? I'm in
awsome, good stuff
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.
What theme are you using?
Material theme darker
@@cosdensolutions Thank you!
Thanks bro.
Awesome Video
Nice one from a nice guy. Your link to 🚀Project React is not working.
Ok, It's working now. Thanks
what vs code extension do you use for chat-gpt?
Copilot
Have you tutorial about rtq ?
not yet