React Query Tutorial - 20 - Infinite Queries

Use coupon code: CodevolutionYoutube 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

React Query Tutorial on Infinite Queries
Infinite Queries with React Query

[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
// 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

[wjqxdii]

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

[onlinearfan]

how to load data by scrolling to the last one ?

[jacinyan]

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

[nikhilkumarpatra]

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

[markokraljevic]

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

[diogojorge]

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

[bhupendersharma]

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