Infinite Scroll And Filters With React Query

In this video I'm going to show you how I implemented Infinite Scroll and filters on my new website.

So I’m currently working on a new site for Watch and Learn, the first MVP is already done and should be live soon, once I decide what I will use for hosting the frontend of the site. The stack that I’m using for the site is October CMS for the backend.

The reason I’m using October CMS for the backend is that my site has been running on October for a few years now and all my videos and data are there, and I don’t wanna waste time with transfering all of that data to another CMS because October is doing the job it needs to just fine.

So I was thinking about how to make pagination for “all videos” page, Currently it’s a classical pagination that you need to click on to get to the next set of items.

In my opinion this is not a very good pattern because normal pagination gives you redundant info, what I mean by that, is that the pages of a list don’t actually mean anything to the user, the user won’t know what to expect on the 2nd page, and what to expect on the 10th page.

So it’s better to just serve a list that the user can scroll through without any required interaction to see the next items in the list.

This is a familiar pattern that you can see on many apps and platforms like Facebook, Instagram, Youtube and so on.

And if you include #filters with infinite scrolling this makes a very nice combo. Because when the user actually filters something he or she will have a general idea of what to expect in terms of content that will be returned.

So for my site I decided to go with Infinte Scroll because of the reasons mentioned earlier.

So on my site I decided to go with #React #Query which enables me to have Infinte Scrolling, Filtering and also everything else that React Query offers in terms of data fetching - like caching, content invalidation and so on.

In this video I’m going to show you how I did this.

### Code used in this video

----------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------

### You can support my work on Patreon

### Follow me on Social Media

[THGNTR]

Thanks you so much, it helped me a lot!

[mustafawael]

First of all, thanks for your efforts and sharing your knowledge with us 😊❤️,
Could you create another video about how to use strapi graphql instead of REST api with the same react-query filtering and infinite scroll functionality ☺️☺️

[kathiyavadi_sk]

my problem is related to pages. i have a listing page which use getserversideprops function and i click on one of the list i go to detail page which is also use getderversideprops function. my listing page has a scroll function which is update list based on scroll. when i scroll 5 to 6 time and click one of the list and hit browser back button i lost my list so how i maintain my listing data as it is that i'm not lost.

any one help me with this !!

[GamingYT-cfbe]

Can with do it with reddit API? Because in reddit API pagination working on after before method in URL please suggest how to do infinite scroll with reddit API.

[tomphung]

Hi, how do I use pagination with strapi and react query? Since strapi does not provide pagination

[peter]

Hi, how can i replace the october code? I'm trying but I cant solve this, and its so painful. Btw i wanna get items from mongodb with nextjs, and load them with infinity scroll, filters, and sorting. But I cant rewrite that code you did with october xd. Pls help me :'c