In this first part we are going to create add to cart button, and instead of using something like Redux we are actually going to try to use Directus and React Query for our state management. 

Directus is going to be used to persist the data in the user session collection that we are going to create. There we will temporarily save the users order and persist the data that way.

So we are going to start adding our products to temporary order object in this episode. 

And in the next episode we are going to finish this functionality by implementing user cart. And display current order that way. 



In this episode we are going to start implementing add to cart functionality. I say start because this is a pretty big functionality so I’m going to split it into two parts.

Add To Cart

You guys seemed to like my last video about Directus 9, and many of you reached out and asked for more Directus 9 content. So I decided to make it a series where we will be using Directus 9 as our API and CMS, and of course Nextjs for the frontend of our site. Kind of like we did with Strapi and Nextjs series. 

This time however we will add Tailwind into the mix and also include React Query right from the start for better performing API requests, caching, state management and so on. Oh, and also instead of using REST API we are going to use GraphQL for this series. 

Also I can't think of a better time to start this series, Vercel just released Nextjs 12, which brought with it some major changes and improvements to the framework, Directus is still in Beta or Release Candidate phase, much has changed on that front from the latest video so this would be a great time to check everything out. 

The goal of this series is to create a website and publish it online, we will be using Digital Ocean for that. And also near the end of the series I'm going to show you how to implement automatic deployments using Github Actions. Just like I did for my website. 

But before all that we have to start somewhere, the goals for this episode will be:

- Installing Directus 9
- Next.js
- Tailwind
- React Query
- Creating a collection in Directus 9 and display it on page with GraphQL

In this first episode of Nextjs and Directus series we are going to set everything up and fetch some data to see if everything is working properly.

Install Next, Directus, Tailwind, React Query, GraphQL And Fetch Data

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-websites-nextjs-and-strapi/infinite-scroll) 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](https://www.freepik.com) from [www.flaticon.com](https://www.flaticon.com/)

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

Tutorials tagged with: react query

Get in touch