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!
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!
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.
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:) 👍
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?
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?
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
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?
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!
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.
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.
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??
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
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
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?
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 ..
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!
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.
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!
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.
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!
Nice and concise. No nonsense and unnecessary lingering. 👍
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.
Amazing ! Everything about React Query in just one video. Thank you very much sir
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!
great video, cant believe you did it in 18 minutes
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:) 👍
Thanks a lot for the informative video, straight to the point and without excessive clutter!
I like your comprehensive approach and clear explanations. Thank you for the tutorial.
Subscribed, this is what I am looking for 🔥
Amazing Exaplantion , Any beginer can understand these topic very well 🔆🔆
Thanks for another important react video,concise and straight to the point,already subscribed
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! 🤙
You guy! You have every piece of knowledge I need. ❤
the best video about react query that i found, thx for that 💚
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!
aaaaah my eyes!! Blinded for couple of seconds. Good content, subscribed
yeah will work on that, my bad!
Many thanks, I always find your videos really helpful.
Thank you for having a tutorial for everything
Nice and short with full of information
✌
😊 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! ☺️
Concise and helpful. Nice explanation about React query. Thanks a lot!
Awesome man❤❤...u r doing a good work...keep it up
Excellent explanation 👏
Well explained. Thanks for the time to make this tutorial.
You're just brilliant! I'd like to see a tutorial on Apollo Client... the way you explain code is extraordinary
Great tutorial!
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?
Thanks. Your tutorial is very helpful. Hopefully there will be some regarding Tanstack routers too
Love this library. Really useful one for sure.
just what I needed thank you!
Highly valuable! thank you for this video!
Your videos are very helpful, thank you !
Lol, The Subscribe part made me subscribe, nice
very very clean tutorial thanks a lot bro
Awesome simple example and great tutorials
Subscribed ! exactly what I need to start using the lib ! thanks ;)
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?
This helps lot to me brother. subscribed you
Worthy video ❤
Awesome! Thank you!
Amazing tutorial.
Awesome video. Thanks
very well explained thanks a lot
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
clean and contentfull
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.
awsome, good stuff
react query changed my life :0
Same
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
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
Excellent video
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☺️
Thanks bro.
amazing videos, thanks
Awesome Video
Simple ND TO THE POINT
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.
Thank you!!!
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
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.
Somehow using the onSuccess of useMutation with the useQueryClient doesn’t work. Do you have an idea why ?
It was great thanks
What is the extension which gives inline "You 3 hours ago Initial commit"?
git lens
is onSuccess being deprecated from useInfiniteQuery? If so, what is the alternative for onSuccess?
Excelente, comenzare a usarlo
Muy bien! 😁
jo, your vscode theme is slick. I like how the code is poping out. whats the name of it?
what copilot plugging are u using - Im in webstorm
There is any video explaining prefetchQuery ?
Probably should've included parts for:
useQueries, dependent useQuery and dependent useQueries.
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!
Ty Bro
a senior developer in 19min? I'm in
Hi Cosden can you tell about react query useQuery onSuscess has been depricated in latest version of react query ..what's it alternative ?
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.
Hello! What ChatGPT extension are you using?
copilot!
On react native, does it cache with persistent storage or just from ram? If I enable cache and kill the app, will it refetch?
thanks !
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
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
What theme are you using?
Material theme darker
@@cosdensolutions Thank you!
How do you revalidate data when we're fetching on rsc?
Thank you.
You're most welcome ☺️
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?
bro make a tutorial about react table also . you make things really through . plzz
subscribed
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 ..
Can someone tell me the extension name that provides code suggestion, like in the video above.
github copilot
Which autocomplete are you using?
Copilot
🤩🤩🤩