I have not even watched till the end yet, but I can already say that for a react query crash course, this is probably the most comprehensive and useful one I have seen on YT.
We replaced all of our reliance on Redux with using react-query in a recent app. The query store is accessible everywhere within the provider, and its easy to requery, update, etc., including manually updating locally when you say add a row so you don't have to pull the whole state down again to get the update. Plus, my favorite part is that data gets stale and goes away, something Redux does not handle. Finally, it has async built in, so you don't need some third-party hack to make async calls and do double actions just to update state. You do the call, state gets updated later, renders happen, everyone is happy.
This is an incredible crash course. Great job! Also, I'm blown away by how well designed tanstack query seems to be. They seem to have thought of 99% of use cases at first glance. 👏
24:40 Chaining queries - done with "enabled" property, which is a boolean or an expression that returns boolean 36:28 The invalidation invalidates all queries starting with a certain key. In order to invalidate the exact query - the second parameter should be used {exact: true} 37:10 Manually put the data to cache when creating a new, so that it presents even before it is refetched from a backend. Provides better user experience
After 4 months as a intern, first project on the job. Using React-Query, and a new stack... 2 stressfull days... Found this. Showed me so much, so clear, sort of clearing my imposter syndrome on the spot 😂
I wish you would have covered the scenario where you have a list of items with different kind of filters like search fields or dropdowns. When a user interacts with a filter and changes its value, it needs to refetch the list with the values of the filters reflected in the fetch request as query parameters. A little bit like the pagination system but more flexible for custom values. That's a common use case and I wonder if React Query has a built-in solution for this. Would love to get your take on this. Great video nevertheless!
React Query is one of the most consequential additions to the React ecosystem since the beginning. For the first time ever, we can actually separate client state management from server state management and achieve (almost) true separation of concerns. UseQuery and useMutations are kinda like the equivalent of $.get and $.post for JQuery, they allow a service layer to be decoupled from React components. Thus, React being a UI library can be left to what it does best: DOM rendering.
I'm a backend developer. I like to get up to speed on whats happening on the other "side". I must say you did a great job with this video. One of your best so far. Very interesting. Thank you.
8:35 using isLoading and isError before ui rendering logic with successful fetch 10:30 saving useMutation as variable to use later 10:54 new entry not being displayed because of cache 13:11 upon successful mutation -> useQueryClient to invalidate query (with query key)-> re-fetch 16:07 querykey needs to unique for idnetification 23:20 changing default staletime ( fetching only happens when data is stale ( 24:59 conditional query : using enabled. Query runs only when specific key exists Continue watching from useMutate
And by the way, thanks Kyle, you just have ways of reading my mind, you're amazing!! Everything I want to learn you put on the table. I was just thinking of tRPC and almost immediately, I see a notification 😂😂. You're just too good. ♥️
Thank you for your tutorials they have benefited me immensely. Right now, I am working on using reactQuery in conjunction with authentication. The samples you have gone over have benefited me a lot especially your presentation on hooks.
RQ is great! I watched your video on xstate from a few days ago and I was thinking how a wrapper around RQ (or a custom hook) would be just as good / better.
Kyle, also a suggestion, for enabled option when we fetching users For me, this approach -> "enabled: !!postQuery?.data?.userId", worked much better than "!== null" comparision Cause, for some reason, React Query still made a request to API, but instead of userId, for a minute there was "undefined", so looks like that null check didn't worked for me Cheers!
So happy to see the React Query crash course; I've learned some new things here even with the months I've implemented it into my projects. It's also great that TanStack has made this type of library for other things like Svelte. Been learning how to implement React Query with Preact Signals to utilize global props and cut down on VDOM to improve React projects. One thing to note is that the obj passed in for the query function has a signal property (an AbortController) which, while excused as not necessary in this video, is essential for any API fetching used to cancel fetch requests if a user changes mid-fetching. This is a great crash course and hoping to see other things like Preact Signals or even Bun talked about soon.
Great tutorial. But you must have good solid basic React and fetching to be able to follow this. So fast, you won't get bored. You will get super dizzy, but won't be bored. Thank you! 😂😂😂❤
Redux RTK query does same thing and it's also good combo if we use Redux Toolkit for state management. Otherwise, React Query is perfectly fine to work with any other state management libraries. It's also really good to create custom hooks for react-query like usePosts, useCommends, ...etc.
39:23 Pagination Version 5 is not using isPreviousData and keepPreviousData instead import keepPreviousData from react-query. alter to isPreviousData use isPlaceholderData and to keepPreviousData use placeholderData: keepPreviousData (the function you import earlier).
For web apps that have files dedicated to business logic that need access to data from the database, RTK query seems more appealing because I assume you could access the query results without a React hook (using Redux-only). Whereas for React Query, it seems like it was designed to only be used inside React components themselves, which doesn't go well with having a business logic files that power your React components,.
Just want to correct you on that one, you can use your query client outside of react context and then get the data using your queryKey. Just need to export that QueryClient instance There is Theo T3 video about state in React and he assures you TanStack Query is all you need for so called server state and for client state you can use something less bloated like maybe jotai is just enough for you and it's much simpler than RTK
@@DarkzarichV2 Even without react-query using Redux and redux saga I separated the server state and app state into two global states. For server state I used Redux and for app state I used context. Now I am using Next, Prisma, Jotai combination for all that
Bunch of infos, Thank you ! One advice : try to make a playlist and make it to smaller chunk , i guess you can more views this way and it will be eaiser to use it as reference and come back (also will lead to more views)
Thanks for this awesome tutorial, I have yet to use it in my personal projects and I'm eager to give it a try. But I have a more or less related question. Is there an advantage of using useRef hooks with the inputs inside a form? Can't you just get the values from the event instead? Basically you already have the inputs data in that event so imo there shouldn't be a reason to create refs for the same inputs data. Also let's say you had 10 inputs in your form, that would be very cumbersome to have 10 refs.
Are the Notion's note shown at the beginning (and maybe the notes of other topics) available somewhere? It would be so nice to have them in a public Notion webpage as a quick reference when someone just need to remember some details and not rewatch the whole thing!
I just keep and keep watching you. This is an amazing piece of work you're doing. It really helps various types of devs to leverage the knowledge from your courses / crash courses. Thanks for your hard work I am really amazed by the content quality. Best of luck in the future WDS!
I'm more curious about how to manage these useQuery and useMutation, and what the project structure will look like. After all, if useQuery and useMutation are written in every component, the code will become lengthy when the number of APIs increases. Anyway, thanks for the tutorial
First thank for the amazing free tutorial, I just have a question, I thought when you refresh the page you lose the cached data, but you refreshed it multiple times and the data persisted? As of my knowledge the react query library cache data in the javascript runtime environment which reset with refreshing 🤔
i just got your channel and it looks amazing to me. Subscribed Done. can you tell if i want to start react with latest code approach. which videos i need to watch from your channel. i got those videos mixed up.
I have not even watched till the end yet, but I can already say that for a react query crash course, this is probably the most comprehensive and useful one I have seen on YT.
We replaced all of our reliance on Redux with using react-query in a recent app. The query store is accessible everywhere within the provider, and its easy to requery, update, etc., including manually updating locally when you say add a row so you don't have to pull the whole state down again to get the update. Plus, my favorite part is that data gets stale and goes away, something Redux does not handle. Finally, it has async built in, so you don't need some third-party hack to make async calls and do double actions just to update state. You do the call, state gets updated later, renders happen, everyone is happy.
Redux.... Toolkit Query ?
@@piyushaggarwal5207 Redux toolkit is better but react-query is better IMO
Does it work well with SSR in Nextjs?
@@Peter-yd2ok I couldn’t answer that. I’m only starting to learn NextJS right now.
@@alanthomasgramont i see.
This is an incredible crash course. Great job! Also, I'm blown away by how well designed tanstack query seems to be. They seem to have thought of 99% of use cases at first glance. 👏
Right when I needed it. This guy has superpowers!
I literally was looking for a react query tutorial last night. This is amazing! Thank you!
Its litterally the most comprehensive video in such a short span of time....Thanks sir
Thank you for this. I don’t know why, but your video was way easier to understand than React Query’s documentation.
24:40 Chaining queries - done with "enabled" property, which is a boolean or an expression that returns boolean
36:28 The invalidation invalidates all queries starting with a certain key. In order to invalidate the exact query - the second parameter should be used {exact: true}
37:10 Manually put the data to cache when creating a new, so that it presents even before it is refetched from a backend. Provides better user experience
Thanks John Connor. Now get back to fighting skynet
After 4 months as a intern, first project on the job. Using React-Query, and a new stack... 2 stressfull days... Found this. Showed me so much, so clear, sort of clearing my imposter syndrome on the spot 😂
I wish you would have covered the scenario where you have a list of items with different kind of filters like search fields or dropdowns. When a user interacts with a filter and changes its value, it needs to refetch the list with the values of the filters reflected in the fetch request as query parameters. A little bit like the pagination system but more flexible for custom values. That's a common use case and I wonder if React Query has a built-in solution for this. Would love to get your take on this. Great video nevertheless!
You have everything about calling api + state management just by using React query.
Thanks Kyle for your very detailed video about React query.
Not one for commenting, but this beats every other video I've seen on React Query. Great job.
That's a great tutorial! I love it!
It'd be even better if you share your notion notes, so we can reference them as well.
React Query is one of the most consequential additions to the React ecosystem since the beginning. For the first time ever, we can actually separate client state management from server state management and achieve (almost) true separation of concerns. UseQuery and useMutations are kinda like the equivalent of $.get and $.post for JQuery, they allow a service layer to be decoupled from React components. Thus, React being a UI library can be left to what it does best: DOM rendering.
This is the perfect example of a technology explanation. The ideal length for its depth.
I'm a backend developer. I like to get up to speed on whats happening on the other "side". I must say you did a great job with this video. One of your best so far. Very interesting. Thank you.
HELLO FROM THE OTHER SIDE
@@sarbjotsingh9998 😂 welcome to our world
awesome! please please please please do an in-depth crash course of React-Hook-Form
I built a whole platform using react query. I didn't have to write a single use effect. It's great actually.
8:35 using isLoading and isError before ui rendering logic with successful fetch
10:30 saving useMutation as variable to use later
10:54 new entry not being displayed because of cache
13:11 upon successful mutation -> useQueryClient to invalidate query (with query key)-> re-fetch
16:07 querykey needs to unique for idnetification
23:20 changing default staletime ( fetching only happens when data is stale (
24:59 conditional query : using enabled. Query runs only when specific key exists
Continue watching from useMutate
And by the way, thanks Kyle, you just have ways of reading my mind, you're amazing!! Everything I want to learn you put on the table. I was just thinking of tRPC and almost immediately, I see a notification 😂😂. You're just too good. ♥️
🤩 I never build a project without react query anymore. usually with trpc, or with server actions in nextjs!
I watched it all because I've applied it in my current project 💯💯💯
Thank you for your tutorials they have benefited me immensely. Right now, I am working on using reactQuery in conjunction with authentication. The samples you have gone over have benefited me a lot especially your presentation on hooks.
Thanks for sharing some important and common usage of react query, it's really clear and helpful for react-query newbie like me!
RQ is great! I watched your video on xstate from a few days ago and I was thinking how a wrapper around RQ (or a custom hook) would be just as good / better.
update: the mutation object doesn't have an isLoading property. Its now called isPending
Kyle, also a suggestion, for enabled option when we fetching users
For me, this approach -> "enabled: !!postQuery?.data?.userId", worked much better than "!== null" comparision
Cause, for some reason, React Query still made a request to API, but instead of userId, for a minute there was "undefined", so
looks like that null check didn't worked for me
Cheers!
Man you deserve a Noble award! Thank you so much!
So happy to see the React Query crash course; I've learned some new things here even with the months I've implemented it into my projects. It's also great that TanStack has made this type of library for other things like Svelte. Been learning how to implement React Query with Preact Signals to utilize global props and cut down on VDOM to improve React projects. One thing to note is that the obj passed in for the query function has a signal property (an AbortController) which, while excused as not necessary in this video, is essential for any API fetching used to cancel fetch requests if a user changes mid-fetching. This is a great crash course and hoping to see other things like Preact Signals or even Bun talked about soon.
Great tutorial. But you must have good solid basic React and fetching to be able to follow this. So fast, you won't get bored. You will get super dizzy, but won't be bored. Thank you! 😂😂😂❤
This is the best tutorial by far. I've learned everything I need to know.
ReactQuery is awesome! Basically solves all the issues I have with React in a simpler way.
Redux RTK query does same thing and it's also good combo if we use Redux Toolkit for state management. Otherwise, React Query is perfectly fine to work with any other state management libraries.
It's also really good to create custom hooks for react-query like usePosts, useCommends, ...etc.
I agree. If your application does not need state, react query looks good. But if you need global state, redux is a better choice.
@@damianszymczuk7796 zustand is better choice :)
@@jsceo , there is not better choice ever. It depends on the project and your preferences. Though, Zustand is good choice indeed.
@@parnasmi I am new to React, can you please explain why we need state management libraries like zustand and redux if we already have useContext hook?
@@himanshujagdale4966 I’m wondering this same thing too after just learning useReducer
I love this guy 😁. You make me a better developer and your tutorials are quick and easy to follow.
crazy, I was just looking up resources for react query and this popped up. Perfect timing
Love your videos, I would like to suggest that in the future you leave in the lines numbers... it makes taking notes easier.
What a great tutorial, I. was planning to learn it for react native and here we go
I can like his videos without watching them. I love you KYLE
Kyle, you have a great tutor. and thanks for this show. 🙃
it would be greate if you provide whole code in every video. btw loves to watch your videos
Thanks for this tutorial. It was just the right amount of info with the right length.
39:23 Pagination
Version 5 is not using isPreviousData and keepPreviousData instead import keepPreviousData from react-query. alter to isPreviousData use isPlaceholderData and to keepPreviousData use placeholderData: keepPreviousData (the function you import earlier).
Do you have a code sample?
For web apps that have files dedicated to business logic that need access to data from the database, RTK query seems more appealing because I assume you could access the query results without a React hook (using Redux-only). Whereas for React Query, it seems like it was designed to only be used inside React components themselves, which doesn't go well with having a business logic files that power your React components,.
Just want to correct you on that one, you can use your query client outside of react context and then get the data using your queryKey. Just need to export that QueryClient instance
There is Theo T3 video about state in React and he assures you TanStack Query is all you need for so called server state and for client state you can use something less bloated like maybe jotai is just enough for you and it's much simpler than RTK
@@DarkzarichV2 Even without react-query using Redux and redux saga I separated the server state and app state into two global states. For server state I used Redux and for app state I used context. Now I am using Next, Prisma, Jotai combination for all that
Thanks for the great content. Please teach how to put the data from useInfiniteQuery to a state so we can use it fluently in a react component.
Can you share with us the notion notes that you took for react query? That would be very helpful
Thanks Kyle, this is gold. " Nice ka bai" 😁
Bunch of infos, Thank you !
One advice : try to make a playlist and make it to smaller chunk ,
i guess you can more views this way and it will be eaiser to use it as reference and come back (also will lead to more views)
Great tutorial! Thanks Kyle 🙏🏽
I just start using react-query for work this morning, it's fcking amazing
amazing thanks for such an incredible crash course
you should also show us an api that you used for fetching ,without this it is very difficult to understand infinite scroll type stuffs
Please make a tutorial on how to use react-query with nextjs (SSR)
Best video ever related to react query ❤❤
Thanks for this awesome tutorial,
I have yet to use it in my personal projects and I'm eager to give it a try. But I have a more or less related question. Is there an advantage of using useRef hooks with the inputs inside a form? Can't you just get the values from the event instead? Basically you already have the inputs data in that event so imo there shouldn't be a reason to create refs for the same inputs data. Also let's say you had 10 inputs in your form, that would be very cumbersome to have 10 refs.
Great explanation! Very useful. Thank you.
the most amazing video about react query ✨
Are the Notion's note shown at the beginning (and maybe the notes of other topics) available somewhere? It would be so nice to have them in a public Notion webpage as a quick reference when someone just need to remember some details and not rewatch the whole thing!
++
Thank you so much for these tutorials
Hope you'll make a tuto about Redux toolkit
Thanks
Very good information. Short, fast and useful.
Perfect timing for this tutorial. Thank you thank you thank you!
I know what I'll be doing this weekend. Thank you!
My bro Kyle is reading people's mind at this point
Excellent video! As always! thank you for sharing your knowledge.
I just keep and keep watching you. This is an amazing piece of work you're doing. It really helps various types of devs to leverage the knowledge from your courses / crash courses. Thanks for your hard work I am really amazed by the content quality. Best of luck in the future WDS!
Just like a pro! thanks alot!! 🤩😍😇
Such a useful tutorial. Thank you Kyle a lot!
Hey, Could you just please make a written blog, in your website I always used to read them in classrooms
Ty so much for this amazing crash course
Wow finally I understand the concept 😍😍
Extremely useful. Thank you very much.
Is there a way to get access to those notes? seems like a super helpful resource
I really love your teaching, however, since you're a full stack developer, I really hope you sell a back end course as well.
Great video. Can share me any link where view use react query library without NPM and load with script CDN. Thanks so much.
This is an awesome tutorial, well done and thank you!
You just save my day! Many thanks
Thank you for the tutorial! I've learned a lot.
Thank you very much Kyle, I learn a lot from you.
I'm more curious about how to manage these useQuery and useMutation, and what the project structure will look like. After all, if useQuery and useMutation are written in every component, the code will become lengthy when the number of APIs increases. Anyway, thanks for the tutorial
Hi thank you for crash course! Where can i get the Notes you've shown in the beginning of the video
Kyle's short tutorial videos are not really short
First thank for the amazing free tutorial, I just have a question, I thought when you refresh the page you lose the cached data, but you refreshed it multiple times and the data persisted?
As of my knowledge the react query library cache data in the javascript runtime environment which reset with refreshing 🤔
Thank you, please do a tailwind tutorial like this
@@biggestthreattoyourexistence I already know css, but i heard tailwind is much better, but it has different syntax and a learning curve
Kyle, could you do series related to Redux Toolkit && Redux Toolkit Query, please?
Hi Kyle, please also make video on react form hook
*echo "Great tutorial. Thanks Kyle!"*
*BTW, when do you make another tutorial about Prisma?*
excellent tutorial, thanks Kyle
this video is just gem
Had a glance at react, felt like it's only for social networking site as it's very responsive and interactive.
Hey amazing video as always. This one is a cut above. Thanks Kyle!
Great Tutorial!
Thank you, videos like these are crazy helpful. You're the best!
Based on what I've seen in this video so far (it's a good video), if React Query makes data fetching "easy", I would hate to see what "hard" is.
Can you make a video on how to use React Query with Next.js?
What app are you using for note taking? Looks interesting. I use markdown but sometimes I like to have some more features.
i just got your channel and it looks amazing to me. Subscribed Done. can you tell if i want to start react with latest code approach. which videos i need to watch from your channel. i got those videos mixed up.
thanks for this video it was really helpful
Excellent, succinct content 🤘
very useful
thanks
queryClient.invalidateQueries(["posts"]) would be replaced by queryClient.invalidateQueries({ queryKey: "posts" });
Great tutorial 👌 👍 👏