E-commerce with

In this episode I’m going to show you how to create a filter for our products using Directus and Next.js.
Of course we are going to filter those products by category since that is the only parameter that we have for the products at the moment.
So you are going to learn how to use Directus to filter your items, how to pass parameters to your GraphQL query and how to handle filtering with react-query.
Code used in this tutorial
bit.ly/3f61EwV
You can support my work on Patreon
/ watchlearn
Follow me on Social Media
Github: github.com/ivandoric
Twitter: / ivan_doric
Instagram: / watchlearntuts
Facebook: / watchlearntutorials

Пікірлер: 24

  • @arpitgoyal1979
    @arpitgoyal1979 Жыл бұрын

    Thanks for the amazing tutorial. For anyone using Directus Version 9.22.3 (latest version as of 01/30/2023), you have to use "$categories: [GraphQLStringOrFloat]" instead of "$categories: [Float]" in the HomepageFilteredProductsQuery

  • @WatchandLearnTutorials

    @WatchandLearnTutorials

    Жыл бұрын

    I'm gonna pin this comment. Thanks.

  • @scriptKiddieOG
    @scriptKiddieOG Жыл бұрын

    Ahh, peace of mind at last. This is very useful content, being able to filter in this way. Thank you very much indeed! 🙌

  • @WatchandLearnTutorials

    @WatchandLearnTutorials

    Жыл бұрын

    No problem, glad I could help 👍 😀

  • @anasmallakh
    @anasmallakh Жыл бұрын

    I think the filtering should happen client side and not calling the API every time, for that you can use useState(products) to create a filteredProducts and then change it based on the selectedCategories. This way the API is called once, making the filtering faster ... AND I WANTED TO THANK YOU, GREAT TUTORIALS

  • @mrozyyev2853

    @mrozyyev2853

    Жыл бұрын

    That's exactly what I was thinking!

  • @philipplohner5646
    @philipplohner56462 жыл бұрын

    can't wait for the next one 🙂 btw... the next.js with-tailwindcss example is now using Typescript per default... started your course yesterday and had to deal with some modifications to run your code with TS.

  • @alsherifkhalaf7385

    @alsherifkhalaf7385

    2 жыл бұрын

    I found this also I simply changed the ts to js and removed types and it works fine

  • @WatchandLearnTutorials

    @WatchandLearnTutorials

    2 жыл бұрын

    @@alsherifkhalaf7385 Nice 😀

  • @WatchandLearnTutorials

    @WatchandLearnTutorials

    2 жыл бұрын

    Thanks. Hope you figured out how to disable TypeScript as per ALSherif Khalaf advice. 😀

  • @alsherifkhalaf7385

    @alsherifkhalaf7385

    2 жыл бұрын

    @@WatchandLearnTutorials i have a question please 😊😊 Can I change SQLite to MySQL after the phase of local development ?

  • @WatchandLearnTutorials

    @WatchandLearnTutorials

    2 жыл бұрын

    @@alsherifkhalaf7385 Hmmm, not sure. Maybe better do that right away.

  • @techstack1042
    @techstack10422 жыл бұрын

    It would be very helpful if u show how to add custom api endpoint and custom api hook completely...

  • @mohammedalkhalaf6374
    @mohammedalkhalaf63742 жыл бұрын

    when did you change the graphql schema "product_categories" to "category"?

  • @stavosovo
    @stavosovo Жыл бұрын

    Díky!

  • @30rifqiirfansyah98
    @30rifqiirfansyah98 Жыл бұрын

    how can i filter tag, type data = array

  • @JesseVids2000
    @JesseVids20002 жыл бұрын

    Could you make videos on custom API endpoints

  • @WatchandLearnTutorials

    @WatchandLearnTutorials

    2 жыл бұрын

    I think there will be something like that, yes.

  • @mediacreatif
    @mediacreatif2 жыл бұрын

    Hello. Can you explain why you put the "handleProductFiltering" function out of the Home function ? is it forbidden to keep it in the Home function ? THANKS.

  • @WatchandLearnTutorials

    @WatchandLearnTutorials

    2 жыл бұрын

    I think you can put it in Home function if you really want to. Shouldn't be a problem.

  • @mediacreatif

    @mediacreatif

    2 жыл бұрын

    @@WatchandLearnTutorials ok so there is no convention about where to place this kind of function.

  • @WatchandLearnTutorials

    @WatchandLearnTutorials

    2 жыл бұрын

    @@mediacreatif It's just a function, you can put it anywhere.

  • @fhy-jack
    @fhy-jack2 жыл бұрын

    awesome video! not really like the font tho haha

  • @WatchandLearnTutorials

    @WatchandLearnTutorials

    2 жыл бұрын

    Ahhh, what can you do. Can't please everyone. 😀