No video :(

React Query Tutorial #5 - Pagination

Подписаться 1,6 млн

Просмотров 51 тыс.

50% 1

Hey gang, in this React Query tutorial we'll see how to better implement pagination using the usePaginatedQuery hook.
React Query docs - react-query.ta...
🐱‍👤🐱‍👤 JOIN THE GANG -
/ @netninja
----------------------------------------
🐱‍💻 🐱‍💻 My Udemy Courses:
+ Modern JavaScript - www.thenetninj...
+ Vue JS & Firebase - www.thenetninja...
+ D3.js & Firebase - www.thenetninj...
🐱‍💻 🐱‍💻 Course Files:
+ github.com/iam...
🐱‍💻 🐱‍💻 Other Related Free Courses:
+ React Tutorial - • Complete React Tutoria...
+ React Hooks (& Context) Tutorial - • React Context & Hooks ...
Download node.js - nodejs.org/en/
Get VS Code - code.visualstu...

Опубликовано:

5 сен 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 122

@devplus7131 3 года назад

Even though some of the query-functions are now deprecated but still, this playlist is useful because it helps to understand why to use " react-query " and how to get started with it. Thank you Shaun for your great effort. :)

@rjc4200 3 года назад

Amazing , just amazing mini turorial Shaun. Crisp, to the point and no boring Counter examples like others. Keep it up fetchPlanet(page) ); 2. data.results.map(...) 3. setPages(old=> (!data || !data.next ? old:old+1))}

@davidsyengo1893 2 года назад

add { keepPreviousData: true, } to cache prev page

@sumitwadhwa8823 3 года назад

usePaginatedQuery() has been deprecated in favor of the keepPreviousData option

@GuitarreroDaniel 4 года назад

Currently implementing React Query in a project. Your videos were so amazing to start using React Query, so sad to see that the series is over :(

@guitarDad100 Год назад

Wow. Awesome lesson. I am going to transition a lot of my standard fetch api calls to React Query. Thanks so much for this course.

@itsthecrazytom7855 3 года назад

Great tutorial series thanks Net Ninja! One thing to note is the versions used in this tutorial series: "react-query": "^1.5.8", "react-query-devtools": "^1.1.17", I had some issues following along with the latest react-query version (3.5.1) as there are some syntax differences.

@adeniyiotemade3168 2 года назад

Thanks a lot, I experienced issues too till I saw this

@revillsimon 3 года назад

Thank you for taking the time to make this. Clear and concise as usual. The SWAPI is a great choice for practicing data-fetching

@benarbiamohamedtaher546 2 года назад

Great series and perfect explainations,thank you very much

@NetNinja 2 года назад

You're very welcome! :)

@dnizamovv 2 года назад

You should do a more extensive on React Query! It's getting very popular!

@christopheradolphe Год назад

Thank you Shaun for the great content. This tutorial series is a very good introduction to React Query.

@NetNinja Год назад

You're very welcome! :) glad it was helpful Christopher

@shubhamkumbhare2725 3 года назад

Enjoyed the whole series 😊😊😊

@aixoxa 4 года назад

Shaun your videos are 🔥

@tilakmadichettitheappdeveloper 4 года назад

Hi Shaun, have you heard of this thing called 's-l-e-e-p' ? I mean you created a hour long video on Brad's channel without affecting the regular uploads on your channel. :-) you're awesome

@ridl27 4 года назад

Shaun is more to "ninjas never sleep" kind of religion :D

@martynawojcik3821 3 года назад

Is there a chance to renew the series? Talk about the mutation API, etc.?

@hn031 4 года назад

You did an awesome job man. I got the notification and quickly add it to my list of "To learn", and today I finally went through all the videos. Thanks.

@NetNinja 4 года назад

Thank you :).

@ekeneidiagbor4678 3 года назад

Damm Shaun.. I am more than thrilled with this series. Thank you so so so so much.

@maskman4821 3 года назад

We can use useQuery in Nextjs server side render mode, so that it works like static site, this makes SSR becomes SSG, Thank you Shaun for this awesome tutorial !!!

@Growlboy1986 4 года назад

Everybody should use React Query now :) Thank you for this.

@TechBuddy_ 4 года назад

You are amazing waitig for the next one

@aixoxa 4 года назад

Net ninja's really inspirational. I also have a similar channel for coding too ✌

@jorgedardon5487 4 года назад

Great series and perfect timing! I was looking to implement this library to my SaaS app. I do

@kawding_sikul2629 3 года назад

Love these series.. I hope react query eliminate other state management lib.. Btw i love your accent

@romimaximus 4 года назад

Awesome series...thank you very much ...🖖

@devmrin 4 года назад

Amazing series yet again Shaun! Much love and health to you.

@0the0ambient0 4 года назад

Excellent series! Thank you.

@szymonkucharski4311 4 года назад

Thanks once again for great crash course!

@anonymoususer5402 3 года назад

You made a good tutorial, but I am sad that if you don't expand this playlist more then it just a way to get started. This library is very powerful and required a good project in itself.

@CodeProps 2 года назад

just completed the mini series, it's awesome. Definitely going to plug it into my next React project.

@AdharshMk96 4 года назад

You need to make a tutorial on how to make a lot of quality content continuously... Shaun I have a request, if convenient could you do a Nextjs tutorial with advanced usage?

@DanFlakes 3 года назад

Great series, this would definitely come in handy!

@TanoMoracci 4 года назад

Thanks ! this is amazing! im following on a daily basis while i'm learning React!

@pradeepsaravanan4348 4 года назад

Me too

@hassanessam9340 2 года назад

your explanation is outstanding ! , Thanks A Lot! we're just missing useMutation hook usage in this series , hope you add it soon :).

@lix5694 2 года назад

Thank you very much for this great tutorial! 👍

@chamanraghav1660 3 года назад

Great Work Man, Appreciate the efforts & you are the best in your own style, Loved your style, May god bless you.

@victoriroka6765 4 года назад

Great series and perfect explainations, keep up the good work. we are solidly behind you.

@khanhld8376 4 года назад

love u ninja

@seanbaron6434 2 года назад

Really really well explained. Certainly would be interested in more on React Query (mutation, etc). Anyway, thank you!

@olamidejubril9913 4 года назад

Greate series, please try to make a MERN(MongoDB, Express, React, and NodeJs) STACK TUTO. Thanks so much for the good work.

@pradeepsaravanan4348 4 года назад

Yeah

@tonyjaradev 4 года назад

Omg, thank you sooo much! loved this series!

@MrProkiter 4 года назад

awesome video now i finally understand react-query. I notice that the better code to disable the next page is "disabled={latestData && !latestData.next}" when i use it i don't have button disabled when i load a new page for the first time for a few milliseconds. Good job !

@vibhorsharma2507 3 года назад

thanks a ton for this awesome series !!!

@MrRuchir23 4 года назад

In react-query , please also cover mutations and cache concept

@am6utoi97 3 года назад

Thanks for the tutorial series!

@danielpaszek9071 3 года назад

Great tutorial

@shoaibahmad7507 3 года назад

Great work 👌

@RaiyadRaad 3 года назад

React Query has changed a lot within this short amount of time. So this whole series is now frustrating to follow. I request you to update the videos if possible. Learning from documentation is way better if somethings changes that much.

@osamagamal495 2 года назад

frontend sucks.

@omergronich778 4 года назад

Hey Shaun, great series so far. Did you ever consider maybe making a series on mobx for state management? There are barely any tutorials on it and its an awesome technology!

@kwameagyenim-boateng2968 3 года назад

Man you saved me with this tutorial. Wow

@NeoCoding 2 года назад

thnxs! great as always

@hamed4451 4 года назад

hi Shaun.it was awesome man , one question. is it only for get method and we cant use it fot post methods? another one , which one is better? swr or react-query??and why?

@noicehockey9920 4 года назад

great series Shaun! any plans on making detailed tutorial on React Table lib?

@matheusvictor9629 4 года назад

Great series! What do you guys think about Zustand? I'm wondering if it would be a good idea to use React Query with it

@CodeDreamer68 2 года назад

Very awesome. Thank you for doing this for us. Ok, now, how do we use react query to post, put, patch and delete to rest endpoints? 😀

@rayenmehrez7918 3 года назад

I learned a lot thank you so much

@chetanchandrashekar3306 3 года назад

Thanks for the series Shaun, I have a question on usePaginatedQuery - wondering how does the UX look like for an API that takes probably a second or two to fetch the page's data, I can imagine that user would have pressed Next Page for example and then there would neither be a loading status nor the updated data for a second or two as we would be surfacing respondedData. How would this scenario be handled with usePaginatedQuery , I wonder ? Appreciate your time in making this series .

@dpgmiku 4 года назад

Thx Shaun! Thats amazing. But i would love if the tutorial would be longer. :D

@tasin487 4 года назад

Thanks a lot bro. 🙂

@Pupu._ 2 года назад

awesome video as always! do you have plans teaching infinite scroll with intersectionObserver or any other ways? There are many explanations about it but it's hard to understand :'( and I know if you teach us I might be able to understand since you are the best teacher !

@gme0ver24 4 года назад

Nice series, thanks a lot!

@samuelayegbusi3877 4 года назад

Thanks for this wonderful series. it came in timely. net ninja let's do Chakra UI next please.

@MichaKurzewski 2 года назад

I would go for both previous and next with: setPage((pageNo) => (data && data.previous ? pageNo - 1 : pageNo)) ////// setPage((pageNo) => (data && data.next ? pageNo + 1 : pageNo)) as its a bit more readable, and provides result if there would be page 0 (how can we initialy tell - and api also may scale in the future)

@stanleym3537 4 года назад

Good Job.....

@rishabsharma5307 4 года назад

you are the best

@aixoxa 4 года назад

Shaun really inspired me and my coding channel ❤

@aixoxa 4 года назад

Hey bro Shaun is 🔥. The net ninja inspires my channel

@dnynu 4 года назад

Hey man, Nice Tutorial ❤️🔥👍

@cetincelik8339 2 года назад

Hey, Thanks for the tutorial. Just wanna ask, since we are disabling the Previous button, do we really need to add logic to the onClick event. I think it is OK if we just add this. `onClick = {() => setPage(page - 1)}`

@eugenepaulbadato2746 3 года назад

Super helpful tnx shaun. :)

@TheNamesJT 3 года назад

I have the issue where the page goes up to 2 but doesn't re-fetch i have to switch to a new tab and then go back for the page 2 data to load....werid?

@parasarora5869 3 года назад

great series ... loved it 😍✌️✌️✌️

@NetNinja 3 года назад

Thank you so much 😀

@akshatsharma632 2 года назад

usepaginatedquery has now been deprecated. what should i use instead of this?

@allandacasin9041 2 года назад

Learn the documentation

@akshatsharma632 2 года назад

@@allandacasin9041 ok my nigga

@jemjem8902 3 года назад

You saved me once again

@melfordbirakor 3 года назад

Thanks a lot a Boss

@sabbasachisaha 3 года назад

I think there is some update in paginated query. It will be helpful if you make and updated version of this lecture.

@dmbarry86 4 года назад

Good intro series. Minor point, your onClick button callbacks have dead code after you added disabled logic.

@maximousblk 4 года назад

NextJS tutorial please

@TheAppAlchemist 2 года назад

thanks

@exactzero 4 года назад

Thank you!

@AidosOmurzakov 3 года назад

Hi what about useMutationQuery ?

@lean2009 3 года назад

Great

@AhmadMaartmesrini Год назад

thanks a lot

@NetNinja Год назад

Thanks for watching Ahmad! :)

@michalnowak2181 Год назад

thx

@scottwillrich2132 3 года назад

This seems to be really outdated. Can you please update?

@hassanahmad195 3 года назад

please how can I access data between components in React Query?

@cubedev4838 4 года назад

Hey shaun, can u make paypal, or stripe payment tutorial?

@pradeepsaravanan4348 4 года назад

Hey Stripe api is pretty easy to handle on the front end buddy... Check their docs .It's pretty neat

@erickgutierrez5260 3 года назад

Is it possible refetch() again and maintain pagination?

@theouterspace5285 11 месяцев назад

i did finish it like this const { data, status } = useQuery({ queryKey: ['planets', page], queryFn: () => fetchPlanets(page) }, { keepPreviousData: true, })

@sththapa416 4 года назад

We want Vue JS updated course from you as well eagerly waiting

@JelteHomminga 4 года назад

How does latestData.next gets populated, how does it know there is another page for which it can fetch data? I didn't see you put in the amount of pages anywhere? Or did I missed this? Anyway, keep up the great work!

@baseljuma158 4 года назад

I think this depends on the API your using

@ridl27 4 года назад

ty.

@chidambaram6788 4 года назад

I have a doubt interactive website design Please help Kindly clear my doubt What is viewport actually If I shrink the window size the content inside the webpage also gets shrinks without giving viewport .the browser automatically shrinks the content as the window shrinks (I have used all sizes in % and not used bootstrap and all but the content shrinks so tiny ) I cannot understand why we specify width=device width as the window shrinks the browser automatically reduces the width to the device Why viewport meta tag , or it says to use bootstrap like that or what Iam totally confused

@akhileshtiwari1498 4 года назад

Can you tell us about your next course on udemy?? Please......

@marale72 2 года назад

I saw this here and in another tutorials. Why beeing so complicated with previous and next buttons? This api return next or previous with an url or null, so for the previous you can disable the button if there is no previous, or previous is null. The same applies for the next button. You could use a Logical &&, previous && ...., next &&...., or just a css style for disabled with pointer-events: none.

@amitsaini000 4 года назад

Can i use firestore db with react-query?

@asramaa Год назад

👍

@HarelTussi 4 года назад

Can I use it with react native ?

@victoriroka6765 4 года назад

yes, here is a link that will guild you. react-query.tanstack.com/docs/react-native

@gabyguzman9589 4 года назад

Vue 3!! Vue 3!!!!

@joshuaangelooroy8287 4 года назад

Hello

@NetNinja 4 года назад

@andyrey840 3 года назад

Please, MERN with TypeScript!!!

@michelkant 4 года назад

Great series! Do you recommend to use this to manage firestore queries too? Or is a hook like this then better to use? usehooks.com/useFirestoreQuery/