Episode 16 • Frontend Tips

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 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 Freepik from www.flaticon.com

Download code

Wanna ask a question about this video?

Like This Video?

Consider supporting me on Patreon.

...or you can share this video, that also helps ;)

  • Episode 01 • Duration 23:08

    Using Laravel Elixir With WordPress

  • Episode 02 • Duration 16:13

    Introduction To CSS Grids

  • Episode 03 • Duration 24:47

    Introduction to Pattern Lab

  • Episode 04 • Duration 16:56

    Smashing Magazine + Netlify. What's the Big Deal?

  • Episode 05 • Duration 16:34

    CSS Grid Layouts - One Third + Two Thirds

  • Episode 06 • Duration 16:27

    CSS Grid Layouts - grid-template-areas (Medium.com Example)

  • Episode 07 • Duration 23:59

    CSS Grid Layouts - Gridify My Site

  • Episode 08 • Duration 19:37

    Organising JavaScript

  • Episode 09 • Duration 04:41

    One Language Every Programmer Should Know

  • Episode 10 • Duration 13:59

    WP REST API - Custom Endpoints

  • Episode 11 • Duration 08:03

    WP REST API - Custom Post Types And Fields

  • Episode 12 • Duration 19:55

    WP REST API - Custom Filters

  • Episode 13 • Duration 13:09

    WP REST API - Add Posts From Frontend

  • Episode 14 • Duration 32:04

    Let's Checkout... Blitz.js

  • Episode 15 • Duration 30:37

    Let's Checkout... Prisma & Next.js

  • Episode 16 • Duration 10:38

    Infinite Scroll And Filters With React Query

  • Episode 01 • Duration 23:08

    Using Laravel Elixir With WordPress

  • Episode 02 • Duration 16:13

    Introduction To CSS Grids

  • Episode 03 • Duration 24:47

    Introduction to Pattern Lab

  • Episode 04 • Duration 16:56

    Smashing Magazine + Netlify. What's the Big Deal?

  • Episode 05 • Duration 16:34

    CSS Grid Layouts - One Third + Two Thirds

  • Episode 06 • Duration 16:27

    CSS Grid Layouts - grid-template-areas (Medium.com Example)

  • Episode 07 • Duration 23:59

    CSS Grid Layouts - Gridify My Site

  • Episode 08 • Duration 19:37

    Organising JavaScript

  • Episode 09 • Duration 04:41

    One Language Every Programmer Should Know

  • Episode 10 • Duration 13:59

    WP REST API - Custom Endpoints

  • Episode 11 • Duration 08:03

    WP REST API - Custom Post Types And Fields

  • Episode 12 • Duration 19:55

    WP REST API - Custom Filters

  • Episode 13 • Duration 13:09

    WP REST API - Add Posts From Frontend

  • Episode 14 • Duration 32:04

    Let's Checkout... Blitz.js

  • Episode 15 • Duration 30:37

    Let's Checkout... Prisma & Next.js

  • Episode 16 • Duration 10:38

    Infinite Scroll And Filters With React Query