React Query Tutorial - 20 - Infinite Queries

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

[@АняОсипчик]

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

[@LeviAckerman-gy4rj]

i mean bro thats great explanation right there man good shit

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

[@AbhishekMulik-l8k]

that's helpful

[@jacinyan3893]

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

[@markokraljevic1590]

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

[@AnhTran-fi7fy]

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

[@markokraljevic1590]

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

[@AnhTran-fi7fy]

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

[@onlinearfan]

how to load data by scrolling to the last one ?

[@RubberDuckCoding]

VERY NICE!

[@nikhilkumarpatra8181]

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

[@saeedballanc]

🥦💚you the best

[@pranavyeole102]

thanks!

[@ballonura]

Hey, this is the last episode?

[@bhupendersharma7036]

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

[@colemanalexander3138]

You mean it fetches
"1 red
2 blue
1 red
2 blue
etc..."
?
Mine is doing that and I can't figure out why either

[@AV-om8jm]

@cepedagm14 I am also getting the same error and url is correct
`4000/colors?_limit=2&_page=${pageParam}`

[@Webdevince]

@@AV-om8jm Hi, because of the version of your Json server , just downgrade the json server or else read the docs in latest version which is alpha

[@mrrishiraj88]

Namaste

[@asitprakash6445]

waiting for next videos...

[@gokabebe]

After this course, please flutter.

[@jakubrezler81]

Learn how to prenounce "Infinite"....