React Query Tutorial - 20 - Infinite Queries

Подписаться 645 тыс.

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

50% 1

📘 Courses - learn.codevolution.dev/
💖 Support UPI - support.codevolution.dev/
💖 Support PayPal - www.paypal.me/Codevolution
💾 Github - github.com/gopinav
⚡️ Checkout Taskade! www.taskade.com/
To upgrade any workspace, login and visit www.taskade.com/billing
Use coupon code: CodevolutionRU-vid for any workspace upgrade. Select "Add promo code" on checkout, enter the code, then hit "Apply". This will apply a 100% OFF lifetime discount to your subscription. Enjoy and feel free to invite others to your workspace!
📱 Follow Codevolution
+ Twitter - / codevolutionweb
+ Facebook - / codevolutionweb
📫 Business - codevolution.business@gmail.com
React Query Tutorial on Infinite Queries
Infinite Queries with React Query

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

20 окт 2021

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

@fares.abuali Год назад

Thank you. For your information: Whenever you fetch the data, json-server actually returns the total count by default (it has an x-total-count property in the response headers): console.log(data.data); // access your data which is limited to "10" per page console.log(data.headers["x-total-count"]); // length of your data without page limit So instead of hardcoding the number of pages, you can calculate the number of pages by dividing the total count by the limit

@user-wj5qx7di9i 7 дней назад

thank you! I checked out requests that where sent while clicking Load more button. Point is here, that when your window gets out of focus, ALL of the previos requests are resent. Meaning, that if I clicked button 10 times (equal to 10 pages), if window gets out of focus, all 10 requests will be resent. Fixed that with setting refetchOnWindowFocus to false, but anyway this behavior is kinda tricky

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

VERY NICE!

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

thanks!

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

Hi Vishwas, i have looked at the docs of combining react query and nextjs, and it’s just confusing. That’s be best if you can cover that. Cheers

@diogojorge1014 Год назад

for those who are having an error when passing the fetcher function, I did it like this: ({ pageParam }) => fetchColors({ page: pageParam }), apparently the page value is in the pageParams property

@user-tb1fl1jq5i 5 месяцев назад

that's helpful

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

how to load data by scrolling to the last one ?

@nikhilkumarpatra8181 Год назад

How to implement fetching previous page data or moving on to a previous page using useInfiniteQuery?

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

waiting for next videos...

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

you didnt explain how is isFetchingNextPage different from isFetching and why is this condition like this? {isFetching && !isFetchingNextPage ? 'Fetching...' : null}

@AnhTran-fi7fy 2 года назад

isFetchingNextPage will be true when fetchNextPage called. {isFetching && !isFetchingNextPage ? 'Fetching...' : null} means only show the Fetching... text when the first fetched was called

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

@@AnhTran-fi7fy because next pages are prefetched and dont have loading state, only fetching in background, right?

@AnhTran-fi7fy 2 года назад

@@markokraljevic1590 in my understanding, fetch next data using fetchNextPage then isFetchingNextPage will change as loading state. No next pages are prefetched in this context.

@saeedballanc 9 месяцев назад

🥦💚you the best

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

Namaste

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

I have used the same and everything working fine but the resul in array of pages like 0 and 1 are always same however when i console the api response that was new array..I don't know where is the mistake