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.

And of course the frontend is Next.js with TypeScript and Tailwind CSS that uses Just in Time compilation. Which turned out to be a really nice way of building the frontend.

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.

Also since October is made with Laravel it makes it pretty easy to create your own APIs that you can connect to with something like Next.js, Vue, React and so on.

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.

Now [I already showed you how to make infinite scrolling with Infinite Scroll Component](https://watch-learn.com/making-websit...) in the previous video, but that component will make it hard for us to include filters to our list of items, because it is primarily made to do only infinite scrolling.

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.

Scroll Icon by https://www.freepik.com from https://www.flaticon.com/

Code used in this video

https://bit.ly/34wPQie

----------------------------------------------------------------------------------------------
⭐ Kite is a free AI-powered coding assistant that will help you code faster and smarter. The Kite plugin integrates with all the top editors and IDEs to give you smart completions and documentation while you’re typing. You can check it out here:  http://bit.ly/3qdjIc5​​​​​
------------------------------------------------------------------------------------------------

You can support my work on Patreon

Patreon: watchlearn

Follow me on Social Media

Github:  https://github.com/ivandoric
Twitter:  Twitter: ivan_doric
Instagram:  Instagram: watchlearntuts
Facebook:  Facebook: watchlearntutorials

• #education
• #nextjs
• #tutorial
• #react
• #react_query
• #query
• #filters