Building React Infinite Scroll with useInfiniteQuery

Learn how to implement React infinite scroll fast with useInfiniteQuery from React Query library. It is not an easy task to build infinite scroll from scratch this is why we will use 2 libraries which simplify implementation.
TIMESTAMPS
0:00 Introduction
1:19 Installation and configuration
2:18 Fetching data
4:19 Adding useInfiniteQuery
6:52 Preparing articles
8:06 Adding react infinite scroll
► CHECK MY COURSES - monsterlessons-academy.com/co...
MOST POPULAR COURSES
► Building real project with Angular + NgRx - monsterlessons-academy.com/co...
► Building real NestJS API - monsterlessons-academy.com/co...
► Javascript interview questions - monsterlessons-academy.com/co...
► Building real fullstack project - monsterlessons-academy.com/co...
► Mastering Git - monsterlessons-academy.com/co...
► Mastering Docker and Docker Compose - monsterlessons-academy.com/co...
► Building real project with React Hooks - monsterlessons-academy.com/co...
► Building real project with Vue + Vuex - monsterlessons-academy.com/co...
FOLLOW ME
► TWITTER - / monster_lessons
► INSTAGRAM - / monsterlessonsacademy
► TIKTOK - / monsterlessonsacademy
REFERENCES
► Source code - github.com/monsterlessonsacad...

[@ahmadbenchakhtir5787]

hi, I hope that you are fine. how we can do a swipeable angular component with handle the touch event for the phone and all those stuff... the hammerJs is very old right new...

[@joshuagalit6936]

Thanks, it's perfect!!!

[@MonsterlessonsAcademy]

Glad you think so!

[@Dadaadad268]

lastPage.articleCount doesn't exist . How did you resolve this?

[@joshuagalit6936]

@@Dadaadad268 add object `count` in your query to sum up all the objects inside your array data

[@Dadaadad268]

@@joshuagalit6936 but he has it as a member of 'lastPage' - how?!

[@dimitridoroshko]

Thanks, man. A very useful video. By the way, where are you from? :)

[@MonsterlessonsAcademy]

Originally Ukraine, now Germany

[@dimitridoroshko]

@@MonsterlessonsAcademy побратиме, як ся маєш?

[@fnandesrafael]

What about an API that doesn't provide an "articleCount" like that api? How can I handle this, because I'm trying to use this method with the fakeStoreApi but it doesn't exactly provide it.

[@MonsterlessonsAcademy]

Then you cant do pagination with this data. You need either articlesCount or pagesCount.

[@fnandesrafael]

@@MonsterlessonsAcademyOh I see. So it's something that the API needs to supply right?

[@9622AX]

Show implementation on Local json file

[@mahdirafi6537]

nice

[@MonsterlessonsAcademy]

Thanks

[@landsman737]

you are suggesting using a 3rd-party code with the last update 2y ago? why?

[@MonsterlessonsAcademy]

I'm not sure where you are looking. It was updated 3 days ago github.com/TanStack/query

[@landsman737]

@@MonsterlessonsAcademy I did a few clicks and saw it at 0:48

[@MonsterlessonsAcademy]

@@landsman737 Ah okay you are talking about react-infinite-scroll-component. Well first of all I don't see a problem with package not being updated if it works as intended. Secondly you can skip using it and just add own logic of scroll end.

[@domink321]

You're not building Infinite Scroll. You are just installing a Infinite Scroll library and using it. The title of the video should be called "Using InfiniteScroll library with useInfiniteQuery"

[@MonsterlessonsAcademy]

Yeap

[@farjanahaque1054]

I dunno why bro grinds his teeth while talking