I always enjoy your videos! Thanks! The error is not set up because fetch does not throw by default, you have to check the response and throw an error with a message yourself.
Congratulations for this video using this promising library! Can I use it to replace the use of redux, reselect and redux-thunk in my project? The back-end I am using us firestore. Keep up the good work!
Hey Stavros! I've never used redux-thunk or reselect... so I'm not totally sure, but I think some of it depends where you want your data. This will give you your data right in the component, but without the ability to have it in your redux store to share to the rest of your global components. If you wanted to share the response from react-query, you'd probably want to look into creating your own context and provider.
Thank you for doing this. Been seeing a lot of chatter on dev twitter about this. One tiny request: Maybe set the css for the html background to be a charcole color and the text to be an off-white. So that way going from the code editor to the browser isn't blinding bright. #darkModeEverything
I am using react query to fetch data, I want to combine it will some kind of offline storage. What will be the best way to do it? Should I use asyncstorage or SQLite and how can I combine it for better control on data.
lol... it's really cause I couldn't remember the async/await syntax for normal functions... so I switched back to const approach. I do these things live and can't help making mistakes :D
Would react query cache the api response when i switch between pages? If not, could you recommend me a library or a process that would help with this. Current my ui is not very snappy because it always fetches data when i go to different routes on my website. Thank you for the great video. Loved it.
Hey Jaskaran! From what I can tell, much like SWR from Vercel, it uses a "stale-while-revalidate" caching approach where it displays old data while it is fetching new data: github.com/tannerlinsley/react-query#caching--invalidation There's also a `refetchOnWindowFocus` option you can set to false if you don't want it to refetch on window focus.
Hey Richard! I haven't used rxJS streams before... if I do one day, I'll let you know! I would imagine the purpose of the key is to avoid performing same query twice (debouncing), but it also supports cancellation, most likely triggered automatically when an existing key is no longer valid (or component has unmounted)... they have a piece in their documentation about this.
Thank you very much it's very helpful and well explained. Do you have any paid course on Udemy or on any other platform looking forward to hear from you
React is a declarative view library, specifically a library (not a framework) that only cares about displaying data. That does not want to be bogged down with data fetching and caching semantics. A library like this I very much doubt will ever be added to react core. That said, React Suspense (which is coming) is a declarative way of modifying your view while you wait for something to complete. You can think of it as the view part of react query and swr.
Hey Hypo! I'd love to help all I can, but it's very difficult because I am pretty busy without much free time... asking on RUclips and/or Twitter is the best because then other people can help out if I don't know or don't have time to provide a good answer.
Hey Ruchir! I believe I have 3 videos on that very topic :D ruclips.net/video/iDZxjJYMOUQ/видео.html ruclips.net/video/XaHk9vhmus4/видео.html ruclips.net/video/d8V5vcZOQe4/видео.html
I am working towards becoming a full stack web dev... currently i have good grasp of front end js frameworks. What shouls I focus for the backend that would complement the frontend, i was wondering PHP(my node knowledge is pretty decent) ?
My vote would be to stick with JavaScript (Node.js) / Python on the backend. Here is a good roadmap for you to help plan your journey: roadmap.sh/backend
Sorry Noel! I didn't want to take those fun times away from you! :D The truth is that there are a few reasons: 1) The more complicated the example, the more I lose people and also forget what the heck I'm even doing... and 2) Often I use this as a way for me to learn and try out a new package... so I'm not really solving a real production need, and haven't dived into all the config options myself.
Your videos are always super helpful and high quality, Leigh. Great content and learned a lot from you. Thanks for taking the time to make them!
Thanks so much for taking the time to say hello, Andy! I appreciate it :)
Love you man!!! since yesterday I watched so many tutorial on react query but none of them explained it this well. Subscribed.
Thank you! I appreciate the kind words!
Loved the explanation. Caching is the best thing RQ gives.
Thanks Usman! Yea man, RQ is awesome!
I always enjoy your videos! Thanks! The error is not set up because fetch does not throw by default, you have to check the response and throw an error with a message yourself.
Thank you so much Leigh, very well explained, it was the best video I've ever seen so far.
Thank you very much Sogol! Glad you enjoyed it :)
Thank you! Was actually just looking at this library the other day.
Nice! Did this video help at all, Daniel?
Thanks, very informative and straight to the point!
Thank you Alan! Glad you enjoyed the vid :)
Thank you! Needed an introduction to the library.
Sweet! It's an awesome library, and the creator Tanner Linsley is super on the ball and helpful.
Thanks Leigh, amazing content as always. Greetings from Brazil ❤️
Greetings from Canada
Great video, well explained. Thank you!!
Thank you :)
I love your content it's always so well explained.
Thanks so much, Helio!!
Congratulations for this video using this promising library!
Can I use it to replace the use of redux, reselect and redux-thunk in my project?
The back-end I am using us firestore.
Keep up the good work!
Hey Stavros! I've never used redux-thunk or reselect... so I'm not totally sure, but I think some of it depends where you want your data. This will give you your data right in the component, but without the ability to have it in your redux store to share to the rest of your global components. If you wanted to share the response from react-query, you'd probably want to look into creating your own context and provider.
Thanks Leigh! I ❤️ this resource! great video, keep going!
Thanks Chany!! Aiming for another one this week :)
Great video!! Replace {error} with {error.message} to show the error.
Thanks, Mamatha!! :)
I like the look of this. Thanks for the demo :)
It's a really cool library!! I don't know which I prefer, `swr` or this one, both are pretty great and accomplish similar things!
Thank you for doing this. Been seeing a lot of chatter on dev twitter about this.
One tiny request: Maybe set the css for the html background to be a charcole color and the text to be an off-white. So that way going from the code editor to the browser isn't blinding bright.
#darkModeEverything
Hey Brian! Thanks for the feedback. Just for you, I promise I'll do the next video with a dark theme ;)
always cool videos, man! my congratulations! ;)
Thank you Berlino!
I am using react query to fetch data, I want to combine it will some kind of offline storage. What will be the best way to do it? Should I use asyncstorage or SQLite and how can I combine it for better control on data.
Shouldn't the react-query-devtools dependency be under "DevDependencies"?
Indeed :)
Hi Leigh, thx for this amazing video, could you just please show an example where you implement it along with useEffect
Hey Mamun! Just linking to where we had discussed this on Twitter: twitter.com/leighchalliday/status/1253054973140754433
Personally always enjoy your inspired performance :)
Hehe, thanks Charli!! Glad you enjoyed it!
3:55 when she says you're just a brother to me and you try to suck it up xd
lol... it's really cause I couldn't remember the async/await syntax for normal functions... so I switched back to const approach. I do these things live and can't help making mistakes :D
Great video! What if I don't want to cache the results? Is there an explicit hook to be added to queryHook?
Hmmm... I'm not entirely sure if this would work, but you could try setting the `cacheTime` option to 0 (milliseconds) and see if that works!
Would react query cache the api response when i switch between pages? If not, could you recommend me a library or a process that would help with this.
Current my ui is not very snappy because it always fetches data when i go to different routes on my website.
Thank you for the great video. Loved it.
Hey Jaskaran! From what I can tell, much like SWR from Vercel, it uses a "stale-while-revalidate" caching approach where it displays old data while it is fetching new data: github.com/tannerlinsley/react-query#caching--invalidation
There's also a `refetchOnWindowFocus` option you can set to false if you don't want it to refetch on window focus.
Great video!
Thanks Leandro! I appreciate the support!
You are wonderful man
Thank you very much :)
Great Tutorial , Thanks Leigh,, I like your hairstyle.
Haha... it was better when I wasn't balding 😭
Does that library have debouncing or cancellation a la rxJS streams?
Hey Richard! I haven't used rxJS streams before... if I do one day, I'll let you know! I would imagine the purpose of the key is to avoid performing same query twice (debouncing), but it also supports cancellation, most likely triggered automatically when an existing key is no longer valid (or component has unmounted)... they have a piece in their documentation about this.
Thank you for your efforts.
Thank you Abesse, I'm glad you enjoyed the content!
Thanks, Buddy. Please how can I use react-redux action with react query?
Hey Emmanuel... what exactly are you trying to do?
Thank you very much it's very helpful and well explained. Do you have any paid course on Udemy or on any other platform looking forward to hear from you
Hey poa test! Nope, just here my friend :) Subscribe for weekly videos!!
Love you brother!
Right back at you, Harsh!
you don't have to await respose.json(), since you are turning the result
True! While technically correct, I'd say do whatever you find more readable... I think that's more important than technical performance here.
You are awesome. Thanks
Thank you!! I appreciate the support :)
why is something like this not in 'react' official? will it be added?
Hey Matthew! No clue :) I don't make react :D
React is a declarative view library, specifically a library (not a framework) that only cares about displaying data.
That does not want to be bogged down with data fetching and caching semantics. A library like this I very much doubt will ever be added to react core.
That said, React Suspense (which is coming) is a declarative way of modifying your view while you wait for something to complete. You can think of it as the view part of react query and swr.
I have some questions from time to time on your videos. Can I contact you ?
Hey Hypo! I'd love to help all I can, but it's very difficult because I am pretty busy without much free time... asking on RUclips and/or Twitter is the best because then other people can help out if I don't know or don't have time to provide a good answer.
@@leighhalliday Appreciate your effort and videos. Hands down you have got the best React based videos on RUclips. Keep up the good work.
@
Leigh Halliday, Awesome video , Please cover Xstate For react, there are no good videos on this topic on youtube
Hey Ruchir! I believe I have 3 videos on that very topic :D
ruclips.net/video/iDZxjJYMOUQ/видео.html
ruclips.net/video/XaHk9vhmus4/видео.html
ruclips.net/video/d8V5vcZOQe4/видео.html
@@leighhalliday Thanks cheked them, a state management of complex from through
Xstate will be a great addition to this list
f*ck! Dave Grohl is doing awsome react tutorials! Nirvana, Foo, and now front-end! Love this guy
lol, not sure how much I look like him, but I'll take it!
I am working towards becoming a full stack web dev... currently i have good grasp of front end js frameworks. What shouls I focus for the backend that would complement the frontend, i was wondering PHP(my node knowledge is pretty decent) ?
My vote would be to stick with JavaScript (Node.js) / Python on the backend. Here is a good roadmap for you to help plan your journey: roadmap.sh/backend
Andy's advice seems solid!!
Much appreciated
16:30 🇨🇦
lol... sorry!
Wish you dived more into configs and their possibilities rather than the simple fetch
Sorry Noel! I didn't want to take those fun times away from you! :D The truth is that there are a few reasons: 1) The more complicated the example, the more I lose people and also forget what the heck I'm even doing... and 2) Often I use this as a way for me to learn and try out a new package... so I'm not really solving a real production need, and haven't dived into all the config options myself.