To learn/use react-query. Key-points to remember 1) Read about very imp topics like Important Defaults, Optimistic Update in react-query doc 2) Monitor your Network calls in Network tabs in Dev Tools. Make sure you are making API calls according to your need, because react-query comes with some default settings which you might not want and you can always override it. Throttle your network speed to see different scenarios.
I really appreciate how you presented react-query, it was clearly explained as it was being coded. I'm currently learning this package for work and your tutorial was very timely. I also see a tutorial for NestJs--TypeScript, which I'm excited to learn! Subbed!
wow, best react-query explanation, thanks a lot man. This was just perfect as i expected. you covered the most important edge cases which may take lot of time in the first place if someone didn't know. Best of luck man.
React Query is great, and this tutorial is even greater! Thank you very much, Marius! PS: For an extended version of this tutorial, I'd recommend the Udemy-course of Bonnie Schulkin, which is really excellent, too.
19:30: prevent the api is call before id is available (using OPTIONs) 34:10 update data on Cache after mutating (useQueryClient) 37:30: update data (2nd method) onMutate
hey, thanks for this. Neatly explained and good presentation. Liked the part where you explained the default cache time. Could have covered the stale time as well along with that.
Thanks for your feedback! That’s true I think I should have covered stale time a bit more. It’s something that could be confusing to some because cached data is immediately “stale” by default. Perhaps I will cover that more in a follow up video, since there are also quite a bit more topics to cover that I left out in this intro.
You mostly need something to do screen recording and something to then edit it. On mac for example you literally can get started for free with quicktime and iMovie. You can also use OBS I think for screen recording and use anything else for editing, e.g. davinci resolve is free but you can use whatever.. to get started with editing all you really need to know is how to trim down what your recorded and stitch segments together, that’s honestly 90% of the work. Only other thing I suggest is get a decent mic, I would suggest start with a usb mic, don’t over spend on gear until you know you’re dedicated to making more content. If you’re interested I highly suggest just getting started, start somewhere on any topic, don’t worry about the views. I personally hesitated for a long time and wish I started years ago
It’s honestly fundamentally the same even with typescript, react-query itself is written in typescript so it can plug into a TS react app without really any additional work. There are just a few places where you might need to provide types but for the most part it knows how to figure it out based on what your api request itself returns
3 роки тому+1
Thanks for your video. If you have time and if you want would you mind to explain us what's the difference between mutate and mutateAsync please ? There are both async function so I just don't get when I'm suppose to use mutate instead of mutateasync
Good question.. you can think of it as basically equivalent to the regular mutate, except mutateAsync returns a promise so you can await it and trigger behaviors after the mutation, sort of similar to what you might do in onSuccess/onSettled … e.g. await mutate(); doSomethingAfterMutationComplete();
Hi Marius, thanks for the great resource. I am currently watching the video as a code along but I don't know how to get the reference to the localhost:3001 you used for the server-side. Is it deployed anywhere for use, or how do I make use of that thank you.
That was just a basic CRUD api I happened to have from a previous video, however you can use any CRUD example (either your own or a public API that you can find). For example you can use jsonplaceholder.typicode.com/ which has a mock API that you can do CRUD against
That question mark is the optional chaining operator, I recommend reading about it if you’re not familiar. All api requests are effectively async, it’s addressed just like how you would handle any promise. A huge point about this video is that react-query takes care of handling that for you along with managing the state
How can I update a list when editing a line? I get the row data but the PUT method returns only the updated row, how do I make the list be updated using setQuery and not using invalidateQueries?
Assuming you’re doing your PUT within a mutation, then you can do optimistic updates, see: react-query-v2.tanstack.com/guides/optimistic-updates Which is basically what you’re attempting, get the response data back of the edit and explicitly setQueryData to update the global cache
I really like how your using best practices here. I think I have done things the easier, beginner friendly for too long. Specifically separating API calls from your React code. I have a question though! At 4:00, you export default the getUser fn but not the getUsers fn. Why!? Secondly, in the getUser fn, why did you wrap res in parentheses!? Ex. (res) but not in getUsers fn? Thanks ahead, appreciate anyone's help
Good eye! The getUser not being exported at 4:00 was a mistake, but you’ll notice that’s corrected at 17:45 I might have just not remembered to mention that. As for the parentheses… no reason, don’t get too hung up on that. They’re basically the same. Typically I’d probably have prettier to make that automatically consistently formatted for me. Anyways sometimes you make tiny inconsistencies when you type haha as long as you understand that a single parameter arrow function can be written as (arg) => { } OR arg => { } then there shouldn’t be any real difference or problems. It’s only until you have more than one parameter that you’re enforced to use parentheses. It’s important to have enough language fundamentals so that you understand those shorthands. You should also know that if I didn’t export getUser then I wouldn’t have been able to use it, so you’d likely be able to guess that at some point in the video that likely was corrected if I ever had to invoke it. Anyways great attention to detail!
Can with do it with reddit API? Because in reddit API pagination working on after before method in URL please suggest how to do infinite scroll with reddit API.
@@mariusespejo yes I know but the tricky part in react API is managing the index [after, before] , you need to get the last array index in parallelly with API response.
what if you wanted to share UserDetails for selected user app-wide, would you pass this information into useContext API, or doesn't react-query replace needing context?? thanks again
good question, the query cache effectively replaces need to put things in your own context. E.g you could query the user high enough in your component tree, perhaps in the root component itself. And that would effectively make the user basically global, and other component rendered below that root can simply pull the user data out of the query cache (which itself functions like context which you can access anywhere since the provider for it wraps your entire app)
What kind of parameters are referring to? Api/url params are handled by whatever you’re using to make requests e.g. axios/fetch. React-query is simply the state manager
Hey awesome tutorial. I finally made the decision that I should essentially be using react-query for literally every single project. I have a question though. For anyone maybe reading this lol. Why is it when I have a "isLoading" if check, that my entire application just goes blank on a throttled connect? I have the isLoading state returning before the UI is returned too, just like your example, just like the example from the docs. I can't figure it out. Any help would be appreciate D:
@@mariusespejoSorry forgot to check this. Yeah as I was watching your tutorial and applying it to my app, it wasn't working properly cos I was setting local state with the data response. Can't do that. It also defeats the purpose as react-query can't cache the results if you set local state! But once I realized all was good 👍
sounds like you didn’t provide the query function correctly. double check your syntax. As for the 401, well that means you’re not attaching the jwt to the auth header correctly. That doesn’t really have anything to do with react-query but more on your underlying request
react-query is really better suited for request-based communication, it doesn’t really support real-time connections like with websockets (as far as I can tell)
real-time apps would usually require some kind of event-based publish/subscribe method, which doesn’t really fit the model that react-query uses which is more towards request/response
depends on the use case, if it manages to succeed in getting a response for the user then the user will only see a loading screen and not an error page. That’s useful in some cases like maybe a user momentarily loses internet connection. But yeah I sort of think of it as just a delay in showing the error, definitely not always necessary. Good thing you can turn it off though. Probably one of the things I wish wasn’t a default
you can use it with graphql if you’d like: react-query.tanstack.com/graphql it more depends on if the feature set of react query is good enough for you to remove apollo.
@@mariusespejo I see. Apollo pretty much has everything I need and even more. That's the case, it adds a lot of overhead so I was looking for a simpler solution. There's urql too. But react query looks pretty nice as well. Thanks for the reply mate. Big fan of your work.
thanks Drake! I have tried urql myself, I would personally recommend that over apollo if you specifically want something for graphql that’s lighter weight. The only thing I saw that apollo did differently was their client state manager but there are better solutions for that like zustand in my opinion
@@mariusespejo Thanks for letting me know about zustand. Yeh, I agree with you on urql. I looked into react query and I'm gonna use it for my next project instead of apollo. I've been using graphQ codegen for types anyway so it fits perfectly.
those are technically two separate packages for different problems. You can use both if you’d like. If you add in react-query it will definitely reduce the need for redux to manage your server data though (potentially making your overall redux code simpler)
To learn/use react-query. Key-points to remember
1) Read about very imp topics like Important Defaults, Optimistic Update in react-query doc
2) Monitor your Network calls in Network tabs in Dev Tools. Make sure you are making API calls according to your need, because react-query comes with some default settings which you might not want and you can always override it. Throttle your network speed to see different scenarios.
I really appreciate how you presented react-query, it was clearly explained as it was being coded. I'm currently learning this package for work and your tutorial was very timely. I also see a tutorial for NestJs--TypeScript, which I'm excited to learn! Subbed!
Thank you! Glad you subbed, I actually have a lot more frontend/react content I’d like to make, if you’ve got ideas let me know!
My man, you're quickly becoming my goto teacher for more modern JS web dev stuff. Your topic choices are on point, and the presentation is great.
Glad you think so Branimir! Thanks for your feedback 🙏
got knowledge that I have been looking for over 3 years, I am talking about handling the "U" in CRUD operation. Thanks Marius!!! Great video...
awesome! glad I could help
I appreciate how clear and understandable your explanation is
I wish I had found this video a few months ago. You’re really clear at explaining this and have everything laid out accordingly. Thank you for this!
I’m glad it’s helpful! Thanks for stopping by to comment Anthony 😄
the best tutorial on useQuery, it was such a confusing topic for me. But now super clear!
You could name this video to 'No bullshit guide to React-Query'. The video was on point! Many many thanks! Just love your content.
haha thank you! I try my best not to ramble too much and just get into things
Thanks for another great lesson, Marius. I've recently passed several of your videos on to my colleagues.
thanks for sharing Stephen! glad the content is useful
That background refetching is insane
Best react-query explanation, thanks a lot
wow, best react-query explanation, thanks a lot man. This was just perfect as i expected. you covered the most important edge cases which may take lot of time in the first place if someone didn't know. Best of luck man.
Thanks! Glad it was helpful for you
React Query is great, and this tutorial is even greater! Thank you very much, Marius! PS: For an extended version of this tutorial, I'd recommend the Udemy-course of Bonnie Schulkin, which is really excellent, too.
Glad you think so, thank you Ansgar!
Hi, does it cover react query V3 or V2???
@ Both V3. The one of Bonnie Schulkin and this one.
19:30: prevent the api is call before id is available (using OPTIONs)
34:10 update data on Cache after mutating (useQueryClient)
37:30: update data (2nd method) onMutate
Thank you so much. This is the best Query tutorial I have seen so far - most of them seem to obviate the useMutation for some reason.
Glad you found it useful!
Great explanation. Ive had a hard time getting my head around this new server cache management abstraction.
hey, thanks for this. Neatly explained and good presentation. Liked the part where you explained the default cache time. Could have covered the stale time as well along with that.
Thanks for your feedback! That’s true I think I should have covered stale time a bit more. It’s something that could be confusing to some because cached data is immediately “stale” by default. Perhaps I will cover that more in a follow up video, since there are also quite a bit more topics to cover that I left out in this intro.
That’s an amazing content bro. You made it look like easy! Thanks a lot
Thanks Dude, it has really been a great walk through. I have applied it at work today.Keep it up.
Handling the errors would be amazing
Wow! Great video. You’re a really good teacher. I needed to learn react-query as part of a take home interview test.
Thanks Tony! Hope the interview goes well for ya, good luck!
soo i switch my project from node to nestjs because of you now i might also switch to react-query you are amazing my friend
Awesome, glad those are working out for you!
Man, you deserve a big thanks!
Thank you so much for this class
Thanks for great lesson , i was looking for video lessons about react query ,finally i found .Thank you very much
You’re welcome Amil, glad you found what you’re looking for!
10/10 . Well explained, straight to the point. Thanks for this tutorial, I found it really helpful.
Thanks Marius, your video helped me understand this very well :)
Really good !! I loved this video, I have learn a lot, more than I could do alone
i’m glad, thanks for your feedback!
Where can we get the repository of this cool video?
good introduction to rquerry
Good stuffs. I really like the way you present, which is to focus on the points.
thanks for your feedback!
I was confused to use react-query with document. because I am not good at English. your lesson is very helpful.
Best react query video ever!
Thanks glad you think so 😄
great introduction I liked it.
Thanks!
its well explained thank you for your effort, every details are explained
Awesome explanation. Thank you for this
thanks, i just finished the video, and i learnt alot! thank you bro!
Love your videos! What softwares/tools do you use for the videos? Hopefully someday I could make tutorials like you do ^^
You mostly need something to do screen recording and something to then edit it. On mac for example you literally can get started for free with quicktime and iMovie. You can also use OBS I think for screen recording and use anything else for editing, e.g. davinci resolve is free but you can use whatever.. to get started with editing all you really need to know is how to trim down what your recorded and stitch segments together, that’s honestly 90% of the work. Only other thing I suggest is get a decent mic, I would suggest start with a usb mic, don’t over spend on gear until you know you’re dedicated to making more content.
If you’re interested I highly suggest just getting started, start somewhere on any topic, don’t worry about the views. I personally hesitated for a long time and wish I started years ago
Thanks for the video ❤️ Great stuff!
wonderful
That was a good explanation .. Thanks a lot
aweasome !
This is excellent. Thanks!
hi from Russia!
your lessons very cool, espessialy nest+grapql video
hello and thank you! glad you are finding content useful
Respect form India
Thanks brother
Really good quality content bro. thanks
Great video and explanation.
Amazing tool
Great job! TKS
Thank you for always uploading helpful videos! If you could replace this with typescript, that'd be great!
It’s honestly fundamentally the same even with typescript, react-query itself is written in typescript so it can plug into a TS react app without really any additional work. There are just a few places where you might need to provide types but for the most part it knows how to figure it out based on what your api request itself returns
Thanks for your video. If you have time and if you want would you mind to explain us what's the difference between mutate and mutateAsync please ? There are both async function so I just don't get when I'm suppose to use mutate instead of mutateasync
Good question.. you can think of it as basically equivalent to the regular mutate, except mutateAsync returns a promise so you can await it and trigger behaviors after the mutation, sort of similar to what you might do in onSuccess/onSettled … e.g.
await mutate();
doSomethingAfterMutationComplete();
thaks
You got a subscriber ! Thanks
thanks! what types of content are you looking for? mostly react stuff?
Hi, great explanation. Also Im interested to know whats your VSCode theme & font syle. Thanks
I believe I’m using github dark here, I just switch it up once in a while. Font is just default
What theme of vs code do you use ? Nice video btw
night owl in this one
it saves my day :)
good
The bestt 🔥
Hi Marius, thanks for the great resource. I am currently watching the video as a code along but I don't know how to get the reference to the localhost:3001 you used for the server-side. Is it deployed anywhere for use, or how do I make use of that thank you.
That was just a basic CRUD api I happened to have from a previous video, however you can use any CRUD example (either your own or a public API that you can find). For example you can use jsonplaceholder.typicode.com/ which has a mock API that you can do CRUD against
@@mariusespejo Thank you very much for the response, highly appreciated. I am trying that out.
Thank you
would love to see on rtk query too
Yeah I’m actually interested in doing a comparison with it
Freaking awesome! Where are u from?
-
GOOD
amazing, do you have a github from the code repo ? thanks
not at this time sorry
@@mariusespejo no problem, thanks
whats the ? before data doing and is thbase /users get request async and how is that addressed?
That question mark is the optional chaining operator, I recommend reading about it if you’re not familiar. All api requests are effectively async, it’s addressed just like how you would handle any promise. A huge point about this video is that react-query takes care of handling that for you along with managing the state
Hi Marius! May I ask, are you a Filipino?
Opo! 🇵🇭💪
Yooown. Astig!
How can I update a list when editing a line? I get the row data but the PUT method returns only the updated row, how do I make the list be updated using setQuery and not using invalidateQueries?
Assuming you’re doing your PUT within a mutation, then you can do optimistic updates, see: react-query-v2.tanstack.com/guides/optimistic-updates
Which is basically what you’re attempting, get the response data back of the edit and explicitly setQueryData to update the global cache
@@mariusespejo yes! It was exactly what I did! Thanks a lot!
Wonderful,Where I get the code?
I really like how your using best practices here. I think I have done things the easier, beginner friendly for too long. Specifically separating API calls from your React code.
I have a question though! At 4:00, you export default the getUser fn but not the getUsers fn. Why!? Secondly, in the getUser fn, why did you wrap res in parentheses!? Ex. (res) but not in getUsers fn?
Thanks ahead, appreciate anyone's help
Good eye! The getUser not being exported at 4:00 was a mistake, but you’ll notice that’s corrected at 17:45 I might have just not remembered to mention that. As for the parentheses… no reason, don’t get too hung up on that. They’re basically the same. Typically I’d probably have prettier to make that automatically consistently formatted for me. Anyways sometimes you make tiny inconsistencies when you type haha as long as you understand that a single parameter arrow function can be written as (arg) => { } OR arg => { } then there shouldn’t be any real difference or problems. It’s only until you have more than one parameter that you’re enforced to use parentheses. It’s important to have enough language fundamentals so that you understand those shorthands.
You should also know that if I didn’t export getUser then I wouldn’t have been able to use it, so you’d likely be able to guess that at some point in the video that likely was corrected if I ever had to invoke it.
Anyways great attention to detail!
Does redux is not needed, if we use react-wquery?
It’s overkill if you’re already using react-query. I would suggest a simpler library for client state like zustand
pleasse tell me how to add users?
Can with do it with reddit API? Because in reddit API pagination working on after before method in URL please suggest how to do infinite scroll with reddit API.
React-query has support for infinite scroll and pagination if you check the docs
@@mariusespejo yes I know but the tricky part in react API is managing the index [after, before] , you need to get the last array index in parallelly with API response.
can i get the server-side code?
Hi Marius, how about infinite scroll with react-query?
Yup react-query has support for that
what if you wanted to share UserDetails for selected user app-wide, would you pass this information into useContext API, or doesn't react-query replace needing context?? thanks again
good question, the query cache effectively replaces need to put things in your own context. E.g you could query the user high enough in your component tree, perhaps in the root component itself. And that would effectively make the user basically global, and other component rendered below that root can simply pull the user data out of the query cache (which itself functions like context which you can access anywhere since the provider for it wraps your entire app)
@@mariusespejo thanks so much Marius this is extremely helpful and saves so much time not having to mess around with useContext and useReducer
you can just store the selected user id and fetch it with useQuery on the component you need
How to send multiple parameters in react query?
What kind of parameters are referring to? Api/url params are handled by whatever you’re using to make requests e.g. axios/fetch. React-query is simply the state manager
@@mariusespejo suppose i would like to pass multiple parameters to my fetcher function. How can I do that?
Hey awesome tutorial. I finally made the decision that I should essentially be using react-query for literally every single project.
I have a question though. For anyone maybe reading this lol.
Why is it when I have a "isLoading" if check, that my entire application just goes blank on a throttled connect?
I have the isLoading state returning before the UI is returned too, just like your example, just like the example from the docs. I can't figure it out. Any help would be appreciate D:
Hmm not sure, are you positive the thing you’re returning isn’t maybe causing errors?
@@mariusespejoSorry forgot to check this. Yeah as I was watching your tutorial and applying it to my app, it wasn't working properly cos I was setting local state with the data response. Can't do that. It also defeats the purpose as react-query can't cache the results if you set local state! But once I realized all was good 👍
Pwede kaya ang redux-toolkit + react-query ??
If you’re already using redux toolkit you’re better off using RTK Query: redux-toolkit.js.org/rtk-query/overview
@@mariusespejo ahh ok po, thanks sir
Can I get the code ?
awseome video dude, I have a problem, why it returns this error: "Missing queryFn" and 401 not authorized? I'm using jwt..
sounds like you didn’t provide the query function correctly. double check your syntax. As for the 401, well that means you’re not attaching the jwt to the auth header correctly. That doesn’t really have anything to do with react-query but more on your underlying request
@@mariusespejo thanks for the answer, i was forgetting the arrow function in the axios get, LOL
haha glad you figured it out!
What are differences with the real-time app? Can you tell me?
what real-time app?
@@mariusespejo Realtime web application like signalR, WebSocket
react-query is really better suited for request-based communication, it doesn’t really support real-time connections like with websockets (as far as I can tell)
real-time apps would usually require some kind of event-based publish/subscribe method, which doesn’t really fit the model that react-query uses which is more towards request/response
@@mariusespejo Thank you!! Your accent is so good
auto retries seems like a bad idea. Some errors, such as 409 should not be retried.
depends on the use case, if it manages to succeed in getting a response for the user then the user will only see a loading screen and not an error page. That’s useful in some cases like maybe a user momentarily loses internet connection. But yeah I sort of think of it as just a delay in showing the error, definitely not always necessary. Good thing you can turn it off though. Probably one of the things I wish wasn’t a default
can I replace react apollo with react query?
you can use it with graphql if you’d like: react-query.tanstack.com/graphql
it more depends on if the feature set of react query is good enough for you to remove apollo.
@@mariusespejo I see. Apollo pretty much has everything I need and even more. That's the case, it adds a lot of overhead so I was looking for a simpler solution. There's urql too. But react query looks pretty nice as well. Thanks for the reply mate. Big fan of your work.
thanks Drake! I have tried urql myself, I would personally recommend that over apollo if you specifically want something for graphql that’s lighter weight. The only thing I saw that apollo did differently was their client state manager but there are better solutions for that like zustand in my opinion
@@mariusespejo Thanks for letting me know about zustand. Yeh, I agree with you on urql. I looked into react query and I'm gonna use it for my next project instead of apollo. I've been using graphQ codegen for types anyway so it fits perfectly.
Who decided to migrate react-query from the redux/redux toolkit?
those are technically two separate packages for different problems. You can use both if you’d like. If you add in react-query it will definitely reduce the need for redux to manage your server data though (potentially making your overall redux code simpler)
{2022-11-26}
Mumbo Dumbo 😂😂
yeah I need to work on more creative examples hahah
I appreciate how clear and understandable your explanation is