Made withSaleorTutorial

Building an E-Commerce App with React.js & GraphQL using Next.js & Saleor API

Z

Zaiste Programming

Creator on the Saleor channel

Watch on YouTube ↗

27K viewsMay 18, 202119:42 runtime

Learn how to quickly build the foundation for a modern e-commerce application using React.js and a headless GraphQL backend. This tutorial leverages the power of the Saleor API, an open-source, production-grade e-commerce platform, to handle complex backend logic. You'll see how…

Chapters

#saleor#tutorial#commerce

Building an E-Commerce App with React & Saleor

This video demonstrates how to rapidly build the foundation of an e-commerce storefront using React (via Next.js) and a powerful headless backend, the Saleor GraphQL API.

Core Technologies

Frontend: React.js with Next.js for server-side rendering and routing.
Backend: Saleor, an open-source, production-grade headless e-commerce platform that provides a ready-to-use GraphQL API.
Styling: Tailwind CSS for utility-first styling.
Data Fetching: Apollo Client to connect the React app to the GraphQL API.
Tooling: GraphQL Code Generator for creating TypeScript types and hooks from the GraphQL schema.

Key Steps & Concepts

1. The Power of a Headless E-Commerce Backend

Instead of building an e-commerce backend from scratch, the project leverages Saleor.

Pre-built Logic: Saleor has already solved complex e-commerce problems (products, carts, checkout, etc.).
GraphQL API: It provides a rich, strongly-typed GraphQL API, complete with a demo endpoint for development.

Tip
You can explore the Saleor demo shop and its GraphQL Playground at demo.saleor.io.

2. Project Setup

The initial setup involves creating a Next.js app and connecting it to the GraphQL endpoint.

Scaffold Next.js: npx create-next-app
Install Apollo Client: yarn add @apollo/client graphql
Wrap the App: In _app.tsx, wrap the main component with <ApolloProvider>.
Configure Client: Create an ApolloClient instance pointing to the Saleor API URI.

const client = new ApolloClient({
  uri: "https://demo.saleor.io/graphql/",
  cache: new InMemoryCache(),
});

3. Generating Typesafe Hooks

A key part of the workflow is using GraphQL Code Generator to ensure type safety and improve developer experience.

Convert to TypeScript: Add a tsconfig.json to the Next.js project.
Install CodeGen: Add graphql-codegen and plugins for TypeScript and React Apollo.
Configure codegen.yml: This file tells the generator where to find the remote schema, where your local GraphQL queries are, and where to output the generated types and hooks.

Important
By placing GraphQL queries in .tsx files alongside your components and running the generator, you get custom hooks like useLatestProductsQuery created automatically.

4. Fetching and Displaying Products

With the setup complete, fetching and rendering data is straightforward.

Define a Query: Write a GraphQL query to fetch product data (name, description, thumbnail).
Run Generator: Execute yarn generate to create the corresponding hook.
Use the Hook: Call useLatestProductsQuery() in your React component.
Handle States: The hook returns data, loading, and error states for robust UI rendering.
Render Data: Map over the data.products.edges array to display the product list, styling it with Tailwind CSS.

Note
The resulting app successfully fetches a list of products from the headless Saleor backend and displays them in a styled grid, demonstrating the core integration is complete and ready for further feature development.

Introduction to Building E-Commerce with React & Saleor

Today, I will show you how we can build an e-commerce website in React with a back-end in GraphQL, or rather, a base for an e-commerce website, because there's a lot of things that need to be implemented when building an e-commerce website. But the main message from this video is to show you how easy it is these days to build an e-commerce solution.

I want this video to be very short, and at the end of it, after, I suppose, 15, maybe 20 minutes, we will have something working. So we will be using React.js on the frontend and GraphQL on the backend. And the trick here is that on the backend, our GraphQL API, we won't be creating it from scratch, trying to figure out all the details that are needed to create an e-commerce solution. Instead, we will be using this project called Saleor, which is an open-source GraphQL API for building production-grade e-commerce solutions.

And when I first discovered this project, I was, well, blown away, to be honest, how easy it is to build something on top of that. They have a GraphQL API built around for the e-commerce context, and you can build, you know, different UIs or other things on top of that when you are building your shop, your e-commerce platform. And the great thing about that is that they have, as I said at the beginning, they figured everything out. So they have all those notions you would require to build an e-commerce platform, and you can just use them instead of trying to do it on your own.

So you have the back end. You can just get this project. It's written in Python, in Django, and you can deploy it, and then you will have your API. And then you can build a website, for example, in React as in this video, or, you know, a mobile app in Flutter, for example, or React Native to provide this e-commerce storefront.

Exploring the Saleor Demo and GraphQL API

Yeah, so let's see that in practice. So when you go to demo.saleor.io, you will have this, um, an example of a shop. You know, it's a dummy shop, and I think it's written in Next.js, so we will be using Next.js as well in this tutorial. You can browse on different products, you can add them to your basket, to your cart, you can do the checkout. And that's an example of integration, and everything is powered by GraphQL.

So they have this, and they also provide this dummy GraphQL endpoint for you, so you can just, you know, use it. So let's say if I want to get some products, I can run this query. And let's say I want to just first 10, and I'm getting some products. So that's everything we need, basically, to build a storefront, an integration, a website in React on top of this API.

So in this first video, I want to show you how we can just display the products, and then if you're interested, we can, with each video, we can add more e-commerce features like a cart, checkout, and all other sort of things. So let's start simple. Let's try to display the products first as a base for this e-commerce solution.

Setting Up Next.js and Apollo Client

So I will be using Next.js for that. And so let's just copy this line and let's call it sailor-ecommerce-next.js. And let's open that in the VS code.

And I will start the server. So we have this, you know, the starting screen of Next.js, and we can start adjusting it. So the first thing you would need is to integrate with this GraphQL endpoint that's available over here. So we will be using the Apollo Client. I think you already know that I'm not a fan of Apollo, but that's the simplest library here. Maybe in the future, I will change it, but the good thing about for Apollo is that they have a lot of integrations and we'll be using some of that, so it's easier with Apollo.

So let's add Apollo Client. And now we will use the app and we will just wrap everything with our Apollo Provider. So we need ApolloProvider and our application that needs to be wrapped inside. And ApolloProvider from Apollo Client. And here we need the client, so we haven't created it yet. Let's import ApolloClient here and let's say that it's a new ApolloClient. So now we have URI, which is this URL I showed you at the beginning, and then we need to also specify the cache which will be InMemoryCache, something of that sort. So that should work.

Integrating Tailwind CSS for Styling

To make it pretty, let's use Tailwind CSS. So I will just refresh my memory how we can install Tailwind with Next, but I need to use yarn. And then we need to run this.

So now let's just import Tailwind CSS. tailwind.css. Let's remove that. And let's start our app to see if it's working. Can't resolve graphql. Okay, let's install it. Okay, it seems it's working. Let's just check, I think we need to specify the purge option for Tailwind so the JIT is working as expected. Like that should be it. I think that's all for Tailwind.

Generating TypeScript Types with GraphQL Code Generator

And now we could try to run a query, a GraphQL query. But in order to do that, we will use this code generation feature. So there is this project called GraphQL Code Generator. And it gets a schema, a GraphQL schema, and transforms that into on TypeScript types. So our schema is this endpoint provides a schema. So if you go here on the right and you click on schema, you will see all the types, GraphQL types that you can access. And there is a lot of them because Saleor is about creating an e-commerce solution, so you know, there's a lot of things that can be used. And we want to have those types inside our TypeScript app.

So we will use this GraphQL Code Generator to transform this endpoint a file, a TypeScript file with types. So first of all, let's install this codegen CLI. But before we do, it's still, this is still an Next.js using JavaScript. So in order to use TypeScript, we need to just create tsconfig. And now if we run, it will see that we not want to use TypeScript. We need to add some dependencies. And now we detect the TypeScript, Next.js is smart enough to pre-configure this with proper settings. So now we have a TypeScript file and we can for example rename here to use tsx, run it again. It should work as before. Yeah, it's working.

So now we have a TypeScript app and we can add this code gen so it can transform this endpoint, this remote endpoint into a file that contains all the types as TypeScript, TypeScript types. So we need a GraphQL CodeGen CLI and then a few plugins. So TypeScript, TypeScript operations, and because we are using Apollo, TypeScript React Apollo. And this should be dev dependencies. Okay.

Configuring the Code Generator and Project Structure

So once we have this, we need to create a codegen.yaml file. So let's create a codegen.yaml file. And I will just paste some content here and let's quickly go over it. So the schema is point is located at this URL, so that's the same URL we have here in this playground, the one that we can use to do the queries. And then we say that our our queries graphql query queries will be located in the components directory, so along with our react components. And then we want to generate the types in this file and the directory generated using those plugins we installed. And then we also have want to have this schema as json generated in this file in the root directory.

So now let's create components. And let's maybe create a ProductList component. So this will be a function ProductList, and we will return this "products" for now. And inside our index, let's maybe remove all that and let's import, let's import that. So import ProductList from 'ProductList'. If i run, we have this simple message "products" displayed. So let's try to display this list of products. So what we need to do is that we need a query. So let's say latestProducts, and this will be a graphql query. And this is just a string, but because i'm using this comment, it will be recognized as graphql, so we will have the syntax highlighting inside.

Generating and Using the GraphQL Hook

Let's go back to the playground and let's copy this, like that. I wonder, maybe we will take a description as well, and image or rather thumbnailUrl. So we will get, you know, the URL for each uh product. Let's copy that and let's paste it here as our query.

So now we just need to generate this schema, those types from this schema. So let's go to package.json and let's add this new script generate that will run the graphql-codegen, the one we installed, pointing to the code gen we created. And let's see what happens. So now if i run generate, it generated those types. As you can see this file is pretty large. But at the end, at the end of it, we should have this query we defined, but it's as unnamed query, which is not good. So if I just name it and let's call it LatestProducts like that, and let's regenerate. Okay. So now if I go back, yeah, so we are here and as you can see, now we have a name. And we have a hook, useLatestProductsQuery.

Which means that here in our component, we can say data, loading, error = useLatestProductsQuery(). As simple as that. And then we can say if loading, we will return loading message. If error, for now we will just say 'error', maybe let's give a message. And if we have data, we will return it. We will say latestProducts and this will be data.products.edges or empty. And here, let's remove that and let's say let's do a list. li. in fact we need latestProducts.map(product) like that. And for now let's just say product... well it's product.node.title... and now it's name like that. But the problem is that we have node here, so what we can do is that we can say node.name and we can display the name like that. And then we have to close this. Yeah, that should be good. Let's see. Refresh. And voila, we have the list of names of the products that are being fetched from this remote endpoint.

Displaying Products with Tailwind CSS

So let's try to maybe display... let's say that this could be h2. And let's display the image. So that would be source and thumbnail.url I believe. And thumbnail here. And we have it. We have a list of products. It's pretty cool, huh? And it was very easy to integrate.

So now, let's maybe just add some css classes. So let's do a grid, grid-cols-maybe-four, gap-four. Okay. And let me just paste some block so it's nicer. And we need the category but we don't fetch that. So let's say description. Yeah it works. We have the base for e-commerce solution.

So let's just improve it a little bit, quickly, visually I mean, using Tailwind CSS. so we could go back to pages index and here we could say min-h-screen and maybe bg-gray-100. And that in that case uh here we could say white. Yeah. Um, what else? Maybe we could say main, and let's say a max-width let's see seven. And i think we need to do auto. I'm not an expert in tailwind yet but it looks good.

A header would be nice. So let's do a div which could be white with a shadow. And inside we will do... will that work? It's kind of working. I wonder if I do class name, something like that, will it work? Yeah, it's better. So, flex and justify, justify center. No. space-x-8. No maybe here. I don't want to spend too much time on doing tailwind in this video. I don't know how to center this this here. We will see it later.

But as you can see, we have some sort of little shop, with no card and no search, any of that sort. But we have the API that can provide us with this. So I will stop it here. If you're interested, if you would like me to create a real e-commerce solution using Sailor and React and maybe Next.js, let me know in the comments. Yeah, it was very straightforward, very easy. And thanks for watching. See you in the next one.