Thank you for making this! I love react query, one of my favourite react library out there! I hope you can make a tutorial about react table library soon...
Hello, On example#2 at 16:47 we can benefit from Array.from() method to create pageArray range like this: const pageArray = Array.from({length:user.total_pages}, (_, i) => i+1) or const pageArray = Array.from(Array(user.total_pages), (_, i) => i+1) also, when clicking first/last buttons the first/last page number didn't highlighted, maybe we can set a "selected" class on page buttons according to the page number came back from the api Thanks Dave, that was awesome video as usual,
Thanks, Ahmad! Yes, there are many ways to fill an array with numbers including both your examples and mine. Additionally, others are listed here, too: stackoverflow.com/questions/3746725/how-to-create-an-array-containing-1-n The page number highlighting issue is something I noted in the Github source. It happens due to the isPreviousData changing which creates a re-render. We could apply the useRef hook and select / focus a referenced element. If you omit passing the isPreviousData prop, you can also retain the highlight color. Always thoughtful comments, Ahmad 💯 In Kansas, they would say "You keep me on my toes!" which means you keep me thinking!
@@DaveGrayTeachesCode Nice reference, I actually found mine on MDN but I chose the shortest ones 😎(old habit) I just noticed your reop changes, thanks for that update, I really appreciate your kind words and I actually can say the same thing about you, except that it's always easier to put notes on something than to create something. You keep me thinking!💯📈
You're welcome, Andreas! RTK Query does not include any built-in pagination behavior, but I could use it and apply pagination much like this tutorial does. Here is a link to the RTKQ discussion: redux-toolkit.js.org/rtk-query/usage/pagination
hello dave, as usual your content is beyond my expectation 😉😍` oh yeah, regarding react query, in general can you say that the concept and implementation that RQ has, is the same or even exceeds redux? because I see that RQ is very popular and in demand by many users, especially about the infiniteScroll 💪🔥
Until projects are enterprise-sized, modern Redux could be overkill. RTK Query is great and can be used in many ways like React Query. That said, React Query does make some things simpler and it is great for smaller to medium projects. They aren't the same - but many times cached data is all that is needed instead of a full global state solution like Redux. And infinite query and scroll - I plan to cover those, too!
@@DaveGrayTeachesCode thank you and yes, infinite scroll will be appreciated. Browsers address bar should be changed to -?page=1, page=2 .I feel difficulty to do that :)
Your content is very awesome and advanced. I have one request can you please make a react query series and some advanced topics like AWS, Remix, Redis, GraphQL, Microservices, Microfrontend, React Advanced Code Structure and also some Advanced React Native. I know it takes a lot of time. When you have time so please make the videos on mentioned topics it's very helpful for us And once again thanks for the awesome content.
You should get paginated data from the backend when appropriate. Requesting 100k records all at once will likely timeout, and if miraculously successful, may crash your frontend.
@@DaveGrayTeachesCode I'm learning laravel now and see that I'm able to send paginated data. In node js it's possible too. Anyway thank you for your lessons. I love it
@@DaveGrayTeachesCode can you please revisit currying, I watched that add customer, complete order sequence of function in the video, 3times but I still didn't understand 😞
in example 2 i am getting blank screen in console this error is coming how to solve this error.. //Uncaught Error: No QueryClient set, use QueryClientProvider to set one//
Look at my example code available at the link in the description. The index.js has to provide the query client for React Query. Also reference my intro to React Query here: ua-cam.com/video/lLWfZL-Y8lM/v-deo.html
Dude now you're becoming my addiction.
Please more examples with redux-toolkit,
I'm watching your Playlist this whole week
Thank you, Raymond! 💯
Thank you very much, you're one of the best teachers and coders on UA-cam. You're a pro coder, your content helped me a lot. God bless you, Dave!!!
Glad I could help! 💯
@@DaveGrayTeachesCode sir is this full course two videos of query ?
An excellent illustration of using Pagination of API Data, with and without react-query. Concise, yet comprehensive Thanks, Dave
{2022-11-17}
Glad it was helpful!
Thanks man! Best pagination performance I've found on youtube.
You're welcome! 💯
I have been waiting for videos like this. I wish you could do videos on key functionalities in React like Search, Pagination etc. Great work Dave!
Thank you, Nicholas! 🙏 More to come! 🚀
Thank you for making this! I love react query, one of my favourite react library out there! I hope you can make a tutorial about react table library soon...
Great suggestion! 💯
Hello,
On example#2 at 16:47 we can benefit from Array.from() method to create pageArray range like this:
const pageArray = Array.from({length:user.total_pages}, (_, i) => i+1)
or
const pageArray = Array.from(Array(user.total_pages), (_, i) => i+1)
also, when clicking first/last buttons the first/last page number didn't highlighted,
maybe we can set a "selected" class on page buttons according to the page number came back from the api
Thanks Dave, that was awesome video as usual,
Thanks, Ahmad! Yes, there are many ways to fill an array with numbers including both your examples and mine. Additionally, others are listed here, too: stackoverflow.com/questions/3746725/how-to-create-an-array-containing-1-n
The page number highlighting issue is something I noted in the Github source. It happens due to the isPreviousData changing which creates a re-render. We could apply the useRef hook and select / focus a referenced element. If you omit passing the isPreviousData prop, you can also retain the highlight color.
Always thoughtful comments, Ahmad 💯 In Kansas, they would say "You keep me on my toes!" which means you keep me thinking!
@@DaveGrayTeachesCode Nice reference, I actually found mine on MDN but I chose the shortest ones 😎(old habit)
I just noticed your reop changes, thanks for that update,
I really appreciate your kind words and I actually can say the same thing about you, except that it's always easier to put notes on something than to create something.
You keep me thinking!💯📈
Awesome man. It really helped me to glide smoothly.
Glad it helped! 💯
Your content is beneficial for me. thank you so much, Dave!
if you don't mind can you create a tutorial for pagination using rtk query? Thank you
You're welcome, Andreas! RTK Query does not include any built-in pagination behavior, but I could use it and apply pagination much like this tutorial does. Here is a link to the RTKQ discussion: redux-toolkit.js.org/rtk-query/usage/pagination
Much informative ⭐
Thanks!
Thank you for always sharing great content! : )
Great job, there is always something to learn about React 💙
Very true! 💯
Amazing understandable tutorial!
Glad it was helpful!
Great tutorial 👌
hello dave, as usual your content is beyond my expectation 😉😍`
oh yeah, regarding react query, in general can you say that the concept and implementation that RQ has, is the same or even exceeds redux?
because I see that RQ is very popular and in demand by many users, especially about the infiniteScroll 💪🔥
Until projects are enterprise-sized, modern Redux could be overkill. RTK Query is great and can be used in many ways like React Query. That said, React Query does make some things simpler and it is great for smaller to medium projects. They aren't the same - but many times cached data is all that is needed instead of a full global state solution like Redux. And infinite query and scroll - I plan to cover those, too!
@@DaveGrayTeachesCode Yes I agree, that's what I thought too, back to our own project level.
Can't wait for the tutorial ❤️💪
@@DaveGrayTeachesCode thank you and yes, infinite scroll will be appreciated. Browsers address bar should be changed to -?page=1, page=2 .I feel difficulty to do that :)
Your content is very awesome and advanced. I have one request can you please make a react query series and some advanced topics like AWS, Remix, Redis, GraphQL, Microservices, Microfrontend, React Advanced Code Structure and also some Advanced React Native. I know it takes a lot of time. When you have time so please make the videos on mentioned topics it's very helpful for us
And once again thanks for the awesome content.
You're welcome and thank you for the requests!
Thnx Dave, great explanation.
Are you planing on releasing Typescript videos? Ore some kind of MERN project with redux and Typescript?
MERN project and Typescript series separately.
@@DaveGrayTeachesCode thanks can't wait for those.
thanks! This video helped me))
Glad it helped!
Should the backend give client paginated data? Is it good if you get 100k users list and make pagination in react?
You should get paginated data from the backend when appropriate. Requesting 100k records all at once will likely timeout, and if miraculously successful, may crash your frontend.
@@DaveGrayTeachesCode I'm learning laravel now and see that I'm able to send paginated data. In node js it's possible too. Anyway thank you for your lessons. I love it
@@biLLie_wiLLie you're welcome!
amazing content!!!
Thank you!
@@DaveGrayTeachesCode can you please revisit currying, I watched that add customer, complete order sequence of function in the video, 3times but I still didn't understand 😞
Thank you! 👌
You're welcome! 💯
awesome
Thank you, Dharmesh! 💯
Can you please use typescript next time. Javascript is obsolete no one using that
Another interesting tutorial.
in example 2 i am getting blank screen in console this error is coming how to solve this error..
//Uncaught Error: No QueryClient set, use QueryClientProvider to set one//
Look at my example code available at the link in the description. The index.js has to provide the query client for React Query. Also reference my intro to React Query here: ua-cam.com/video/lLWfZL-Y8lM/v-deo.html
@@DaveGrayTeachesCode i added the queryclient set in index root file now my issue got solved .thank you for your response
Oh please, be a grown up and use typescript
Takes a daredevil to code without it ;)