thank you for making this wonderful tutorial, I really love the filtering part, it was something I have been looking for every time have items that I want to filter by category
Another awesome tutorial Leigh! Perfectly explained, definitely inspired me to use SWR in future projects. I await your follow up video mapping locations etc.
Nice video! I will be trying this for a functional component I plan on refactoring. If all goes as planned I’ll use it app wide for convenience. Also thank you for the introduction to this package and keeping this video lite without overkill. I would’ve stopped watching. I can take it from here.
Good video. The filtering part was cool. But somehow I felt you deviated from the actual topic. Swr has lot of other features like revalidation, de duplication, refresh intervals etc
Hi Leigh como estas? how you doing ? I evaluating to implement SWR or React Query for a new feature in my proyect, and future remote fetchs (I hate doing this in redux) and this new feature is a home page with several fetchs of product categories, I think this approach solves the UX showing cached categories instead render all spiners every time. I see React Query takes more size in bundle but i like the devtools to, i dont know.. ok thanks
Hey chany! Honestly I would use the one you feel more productive with... the few kb difference in package size won't make a huge difference to your users, but using the right tool may make a huge difference for you as the developer.
Hey Leigh, I have read that .json() -- in your fetcher "Takes a Response stream and reads it to completion. It returns a promise that resolves with the result of parsing the body text as JSON, which is a JavaScript value of datatype object, string, etc." Because it is returning it as JSON, why don't we need to do JSON.parse() to turn it into javascript object before using it?
Hi @Leigh, awesome tutorial. I tried to implement swr in a typescript project after watching your video. But spreading the args in fetcher is giving me errors because it could not infer types. Can you please suggest a solution if you know one?
Hey! You would still use Fetch or Axios to make the actual HTTP request, SWR just helps you manage caching issues, loading/error states, and generally dealing with promise based responses within the render of a component.
I am experiencing an issue with using global unbinded mutate function, when I put more than one mutant function call with different keys one after the another it only mutates the first one and ignores next mutate calls!!
Hey Ricky! It handles loading and error states for you, has different caching strategies, can reload when window receives focus, etc... check out the SWR page to get an overview of all the functionality it gives you.
With SWR you can create your own fetcher function, in which you can add any headers you want to the fetch/axios request... you'd want to look into how to add headers to a fetch call: developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch#Headers
@@leighhalliday Something like a chat/forum where if you go back to the page after some time the first rendering shows old data while the new data loads in the background? The example you chose is very nice but it doesn't match this use case since crimes from past October won't change anymore.
This is a great introduction but I feel like the tutorial is promoting bad design decisions. If you were going to build something like this, you’d make a component that takes arguments, which category you choose, and it would route and make a request for those specific crimes. Rather than request everything and filtering. Also it’s adding unnecessary complexity to your component. You should do a follow up video of a tear down and rebuild to optimize.
Hey Daniel! Thanks for the suggestions. The API doesn't support querying only the categories, and it doesn't support filtering by category type either... I'd tend to agree that it's better to ask the API to filter rather than doing it client-side though.
Leigh Halliday absolutely! I didn’t realize that they didn’t support querying. Perfect chance to spin up an api that serves arbitrary crime data and make it support querying! 😂 Either way good video. I’m trying to build this small service that lets people visually map out JavaScript in an attempt to find out how much of JavaScript they’ve explored and let them know how deep the lobster tank goes so they can feel like they have more control over their learning journey. I’ll email you a link when it’s beta if you want
thank you for making this wonderful tutorial, I really love the filtering part, it was something I have been looking for every time have items that I want to filter by category
Thanks Leigh, you have a great way of teaching these concepts, I hope you will never stop making videos :)
Thanks Cook! Can't stop won't stop!
lebih baik terlambat dari pada tidak sama sekali , makasi banyak Om Hall...
Thank you so much, I’m coming from vue and yours videos are the easier way to go till now :) keep doing this great job 👍
Thanks Felipe! I'm glad that you're enjoying the vids :)
I needed to learn SWR for a code challenge. Thanks for the tutorial!
Nice! Did you get the job?!?! :D
@@leighhalliday I sure hope so! 🤞
Another awesome tutorial Leigh! Perfectly explained, definitely inspired me to use SWR in future projects. I await your follow up video mapping locations etc.
Thank you so much, Maxi!! Excellent :)
Well-explained. Thank you Leigh !
Thank you David! Thanks for the support :)
You got subscriber! Great unhurried explanations. Thanks.
Woohoo! Welcome :)
Nice video! I will be trying this for a functional component I plan on refactoring. If all goes as planned I’ll use it app wide for convenience.
Also thank you for the introduction to this package and keeping this video lite without overkill. I would’ve stopped watching. I can take it from here.
Thanks Tony! Let me know how it goes for you!
Outstanding tutorial!
Awesome video! You can explain really well!
Thanks again, JS :)
Very useful. Thanks, man. Keep it up.
I'll do my best, Ahmed :)
Great example and usage! thank you!
Thank you Arx!
You explain things well, keep making videos. Btw I'd prefer if you demonstrated the library more than refactoring and things...
Thanks, Nick! Hard to please everyone :D
Great, thank you! Even better with 1.5 speed :)
You're welcome! Do I sound like a chipmunk at 1.5x?
Leigh Halliday just a lil bit
At 3:46, where did you output/print the response?
Thank you. I’m confused to choose between useQuery and useSWR. Could you give me an advice?
I love your vids.
Thank you :)
Good video. The filtering part was cool. But somehow I felt you deviated from the actual topic. Swr has lot of other features like revalidation, de duplication, refresh intervals etc
You're right! They have a ton of cool stuff I didn't cover... this was basically just an intro.
Thanks Leigh!
Glad you enjoyed it!
Great video!
Thanks, Drew! Glad you enjoyed it!!
Thanks a lot for nice tutorial!
Thanks, Deepak!! I appreciate it.
Hi Leigh como estas? how you doing ? I evaluating to implement SWR or React Query for a new feature in my proyect, and future remote fetchs (I hate doing this in redux) and this new feature is a home page with several fetchs of product categories, I think this approach solves the UX showing cached categories instead render all spiners every time.
I see React Query takes more size in bundle but i like the devtools to, i dont know.. ok thanks
Hey chany! Honestly I would use the one you feel more productive with... the few kb difference in package size won't make a huge difference to your users, but using the right tool may make a huge difference for you as the developer.
@@leighhalliday yeah, al final use ReactQuery, vi mas beneficios en el mismo size, el devtools es genial.
Hey Leigh,
I have read that .json() -- in your fetcher
"Takes a Response stream and reads it to completion. It returns a promise that resolves with the result of parsing the body text as JSON, which is a JavaScript value of datatype object, string, etc."
Because it is returning it as JSON, why don't we need to do JSON.parse() to turn it into javascript object before using it?
Hey LaPunzy! You shouldn't have to parse the JSON when you get it back from fetch this way.
Thanks for sharing
Glad you enjoyed it Pako, thank you!!
Hi @Leigh, awesome tutorial. I tried to implement swr in a typescript project after watching your video. But spreading the args in fetcher is giving me errors because it could not infer types. Can you please suggest a solution if you know one?
Hey Vishal! Thank you :) I haven't worked with SWR in TS before... maybe they have one somewhere on their website?
so it means i can use swr instead of axios/ fetch to get data from by backend api also and to display it on my react frontend?
Hey! You would still use Fetch or Axios to make the actual HTTP request, SWR just helps you manage caching issues, loading/error states, and generally dealing with promise based responses within the render of a component.
No still use either!
I am experiencing an issue with using global unbinded mutate function, when I put more than one mutant function call with different keys one after the another it only mutates the first one and ignores next mutate calls!!
Yikes! Maybe it would make sense to reach out to their team and see if it is a bug? Or how they suggest to handle this.
what the benefit of using this instead just make the request from the useEffect hook ?
Hey Ricky! It handles loading and error states for you, has different caching strategies, can reload when window receives focus, etc... check out the SWR page to get an overview of all the functionality it gives you.
thank you - great video , and I'm probably guilty too of {"category: anti-social-behavior"}
No no... it's just called "social distancing" now :)
i want to add authentication bearer token..... how to do it?
With SWR you can create your own fetcher function, in which you can add any headers you want to the fetch/axios request... you'd want to look into how to add headers to a fetch call: developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch#Headers
@@leighhalliday thanks you.
Looks interesting but I don't feel like the video really demonstrates the benefit of using SWR
What would you say the benefits are? Maybe good ideas for another video...
@@leighhalliday Something like a chat/forum where if you go back to the page after some time the first rendering shows old data while the new data loads in the background? The example you chose is very nice but it doesn't match this use case since crimes from past October won't change anymore.
@@leighhalliday Demos including lazy loading, preloading and GraphQL would be appreciated. Supposedly all this is supported.
Can you make a video about using Redux with Next.js its really confusing!!!
Hey M! Sorry... probably won't be making this. I don't really use Redux and am not an expert on it. Sorry about that!
@@leighhalliday what is your preferred alternative?
It explains almost nothing about SWR!
This is a great introduction but I feel like the tutorial is promoting bad design decisions. If you were going to build something like this, you’d make a component that takes arguments, which category you choose, and it would route and make a request for those specific crimes. Rather than request everything and filtering. Also it’s adding unnecessary complexity to your component. You should do a follow up video of a tear down and rebuild to optimize.
Hey Daniel! Thanks for the suggestions. The API doesn't support querying only the categories, and it doesn't support filtering by category type either... I'd tend to agree that it's better to ask the API to filter rather than doing it client-side though.
Leigh Halliday absolutely! I didn’t realize that they didn’t support querying. Perfect chance to spin up an api that serves arbitrary crime data and make it support querying! 😂
Either way good video. I’m trying to build this small service that lets people visually map out JavaScript in an attempt to find out how much of JavaScript they’ve explored and let them know how deep the lobster tank goes so they can feel like they have more control over their learning journey. I’ll email you a link when it’s beta if you want