Building a GraphQL eCommerce App from Scratch

\ \ \ ![](https://cdn.hackernoon.com/images/-mia3pyi.png) **This is what you'll be building!** \ [A survey](https://www.businesswire.com/news/home/20191217005699/en/Frustrated-Consumers-Times-Satisfied-Consumers-Avoid-Buying/?feedref=JjAwJuNHiystnCoBq_hl-fLcmYSZsqlD_XPbplM8Ta6D8R-QU5o2AvY8bhI9uvWSD8DYIYv4TIC1g1u0AKcacnnViVjtb72bOP4-4nHK5iej_DoWrIhfD31cAxcB60aE) by Accenture (n>20,000 consumers, across 19 countries) found that 47% of online shoppers would actually consider paying more - if they were provided with an eCommerce experience that exceeded expectations. \ Great news if you're an e-retailer, right? But *caveat emptor*: the exact same percentage also said that they'd avoid purchasing from the retailer if their experience was frustrating, instead. \ A snappy, responsive, intuitive experience for your shoppers is critical, so the [JAMstack](https://jamstack.org/) - JavaScript, APIs, Markup - has proven popular for eCommerce. However, that's not all you need. The key here is to decouple your frontend and your backend, bridging the gap with GraphQL and clever management of content rendering...and that's why [WunderGraph](https://wundergraph.com/) - a tool to bring together REST, GraphQL, and all your datasources into a single, secure, typesafe, end-to-end avenue for all of your user experiences - makes perfect sense. \ Rock-solid tech, with modern design sensibility sprinkled on top. \ So let's take a look at how we can bring some of these JAMstack technologies - [Next.js](https://nextjs.org/) , [Strapi](https://strapi.io/) , [GraphQL](https://graphql.org/) , and [Snipcart](https://snipcart.com/) - together in a way that lets you build the exact shopping experience for your users that you want, while making zero compromises on developer experience. \ **The 30,000 foot view** Here's what you will need for this tutorial: 1. Node.js & NPM, and Python (required for testing Strapi locally with `sqlite3`) installed. 2. An intermediate knowledge of React/Next.js, TypeScript, and CSS (I'm using [Tailwind](https://tailwindcss.com/) here because I love utility-first CSS; but Tailwind classes translate quite well to pretty much any other styling solution because it's *literally* just a different way to write vanilla CSS). 3. A headless CMS to quickly bootstrap our backend (and add GraphQL) without having to deal with bulky third-party clients that we'll have to ship client-side. Strapi is great, so that's the one we're using here. 4. A Snipcart [account](https://app.snipcart.com/register) to add a cart management system to our eCommerce app (free in test mode). This tutorial uses Snipcart V3. Secondly, here's a quick diagram of our architecture so you know what you'll be building. ![](https://cdn.hackernoon.com/images/-h4b3p9w.png) \ ## **The Backend - Strapi + GraphQL** While a relational database alone would work for most use-cases, production-ready eCommerce is one where you want something more. \ So we'll be using the headless JAMstack CMS, Strapi, as a PIM - a **P**roduct **I**nformation **M**anagement solution - a single source of truth for your eCommerce platform. This will be the hub for your product catalog, where you'd add, modify, enrich, and distribute your product catalog (as GraphQL via an easily-installed plugin) from. \ This tutorial uses `sqlite3` as the Strapi database, but you can swap that out in production with PostgreSQL - or another one of your choice - easily. #### ## **The BFF - WunderGraph** WunderGraph is the key to all of this. It sits in between our frontend and backend, at once serving as a lynchpin for their decoupling, and facilitating typesafe communication. \ It is a BFF - [Backend-for-Frontend](https://learn.microsoft.com/en-us/azure/architecture/patterns/backends-for-frontends) - a service layer, or API gateway, whatever you wish to call it, that serves as the only 'backend' that your frontend can see. \ This works by consolidating data from all your datasources (for us here, a GraphQL endpoint) and using GraphQL queries that you write to adapt that data (via secure JSON-RPC) for each separate user experience that you want to provide. \ You can use filters, joins, translations, etc, whilst maintaining a clear separation-of-concerns between your Next.js app and your Strapi + DB backend and frees them up to do their own tasks. #### ## **The Frontend - Next.js + Tailwind CSS + Snipcart** The frontend isn't too complex, really. WunderGraph generates incredibly useful ready-to-use hooks for querying and modifying data (again, based on the GraphQL operations that you write) so for Next.js, you can just use those. \ Snipcart is a great way to add an easy to integrate, awesome-looking cart management system to any webapp, and it will serve us well. \ This architecture lets you ship your eCommerce experience as a blazing fast, modular, extensible interface rather than the bulky all-in-one client-only apps from days long past. ![](https://cdn.hackernoon.com/images/-btc3pyr.png) ![](https://cdn.hackernoon.com/images/-y0d3pyn.png) ![](https://cdn.hackernoon.com/images/-mve3pwa.png) Here's the finished product, at different screen sizes. \ ## 1. Build the Strapi + GraphQL backend Strapi is an open-source Node.js based headless CMS (Content Management System) that enables programmers to quickly create self-hosted, adaptable, and effective content APIs (RESTful and GraphQL) without writing any code at all. \ **Step 1: Scaffold a Strapi project** Create a new directory, cd into it, and run the following command: \ ``` npx create-strapi-app@latest my-project - quickstart ``` \ 💡 The `--quickstart` flag gives you a [SQLite](https://www.sqlite.org/) 3 database by default. If you prefer to switch databases, [see here](https://strapi.gitee.io/documentation/3.0.0-beta.x/guides/databases.html) . \ Your Strapi app is now up and running at `localhost:1337`. \ ![](https://cdn.hackernoon.com/images/-3kf3psa.png) Go ahead and register an admin for the Strapi project. This is entirely local for development and testing. You don't have to worry about valid emails and strong passwords and the like...yet. \ Now, you should have access to the Strapi dashboard, at `localhost:1337/admin`. ![](https://cdn.hackernoon.com/images/-jig3pgn.png) **Step 2: Create Content Types for your product catalog.** \ The Strapi admin dashboard lets you quickly build the schema for your data without having to fiddle with the actual relational database. Strapi calls these models Content Types. They're pretty intuitive, all you have to do is create a new Content-Type, and add the fields that your products need. \ Go to the Content-Type Builder section on the side bar then select Create new collection type. A modal will appear, where you will enter product as the display name, then click the Continue button. \ The next part is busywork. You'll have to add your actual data next (**Content Manager** -> select a **Collection Type** -> **Create New Entry,** rinse and repeat for each product in your catalog) I'm seeding example data from [FakeStoreAPI](https://fakestoreapi.com/) , so according to that, this is what my Content Types look like. \ Don't forget to add the many-to-one relation between product and category! \ Next, you'll need to grant read permissions for `find` and `findOne` for the two Collection Types, so that those are made public and can be queried without authentication. \ To do this, go to Settings on the side bar, and then : * Head to **Roles** under the **Users and Permissions.** * Click on the **Public** role to edit it. * Click on the **Users-permissions** dropdown, then check the find and findone options for both product and category. \ Now, click the Save button at the top right corner of the screen to update the role. Now, we can make REST queries like `GET /products`, and `GET /products/:id`. But of course, GraphQL would make all of this *so* much easier. So let's get that done next. \ **Step 3: Adding a GraphQL API** To convert our (currently RESTful) API endpoints to a single GraphQL one, we have to install the graphql plugin by running the following command in our backend directory: \ ``` npm run strapi install graphql ``` \ All done, now (re)start the Strapi server using : \ ``` npm run develop ``` \ ...and leave it running for the rest of this tutorial. You now have a GraphQL endpoint at `localhost:1337/graphql`, and you could play around for a bit here\*\*,\*\* writing GraphQL queries to explore your data. ![](https://cdn.hackernoon.com/images/-eih3pnw.png) ## 2. Set up WunderGraph - and our Frontend. Now that we have a GraphQL datasource, it's time to set up WunderGraph as our BFF. Thankfully, the WunderGraph devs have provided a [starter template](https://github.com/wundergraph/wundergraph/tree/main/examples/nextjs) we can use to get both WunderGraph and a boilerplate Next.js app up and running at the same time. \ **Step 1: WunderGraph + Next.js Quickstart** \ CD into the project root (and out of backend), and type in: \ ``` npx -y @wundergraph/wunderctl init - template nextjs-starter -o frontend ``` \ Then, CD into the project directory : \ ``` cd frontend ``` \ Install dependencies, and start : \ ``` npm i && npm start ``` \ That'll boot up the WunderGraph **and** Next.js servers (leveraging the [npm-run-all](https://www.npmjs.com/package/npm-run-all) package), giving you a splash/intro page at `localhost:3000` with an example query (for SpaceX rockets, I believe). If you see that, everything's working. \ Now to actually configure WunderGraph to see our Strapi data, and generate a Next.js client for us - complete with querying/mutation hooks that our frontend can then consume and display data from our Strapi product catalog. \ **Step 2: WunderGraph 101** \ So the way WunderGraph works is, you tell it which datasources your app depends on, and it consolidates these disparate data sources into a single virtual graph layer, that you can then define data operations (using GraphQL) on. Through powerful introspection, WunderGraph can turn pretty much **any** data source you can think of into a secure, typesafe JSON-over-RPC API; OpenAPI REST, GraphQL, PlanetScale, Fauna, MongoDB, and more, plus any Postgres/SQLite/MySQL database. \ That works out great for us; we already have a working GraphQL datasource! So let's get right to it. Open `wundergraph.config.ts` in the `.wundergraph` directory, and add our Strapi + GraphQL endpoint as a datasource our app depends on, and one that WunderGraph should introspect. \ ```typescript // existing code here const strapi = introspect.graphql({ apiNamespace: 'backend', url: 'http://localhost:1337/graphql', }) const myApplication = new Application({ name: 'app', apis: [strapi], }) // more existing code, leave all of this alone ``` *Notice how every introspected datasource needs a namespace - as every one of them has to get consolidated into a single virtual graph.* \ Once you've run `npm start`, WunderGraph monitors necessary files in your project directory automatically, so just hitting save on here will get the code generator running and it'll generate a schema that you can inspect (if you want) - the `wundergraph.app.schema.graphql` file within `/.wundergraph/generated`. \ **Step 3: Defining your Operations using GraphQL** \ This is the part where we write queries/mutations in GraphQL to operate on WunderGraph's generated virtual graph layer, and get us the data we want. \ So go to `./wundergraph/operations` and create a new GraphQL file. We'll call it `AllProducts.graphql`. The file/query name does not matter; its contents and namespacing (in the '`namespace_collection`' format) do. So this is our query to get all products. \ ```powershell query AllProducts { backend_products { data { id attributes { title price image description review_score review_count } } } } ``` Don't celebrate yet; here's another Operation, this time to get one product, by ID (Or slug. Your choice, but slug will probably be better for SEO). \ ```typescript query ProductByID($id: ID!) { backend_products(filters: { id: { eq: $id } }) { data { id attributes { title image price description review_score review_count category { data { id attributes { name } } } } } } } ``` \ Each time you've hit save throughout this process, WunderGraph's code generation has been working in the background (and it will, as long as its server is running), generating typesafe, client-specific data fetching React hooks on-the-fly for you. You can inspect these in `/components/nextjs.ts`. \ ```typescript // existing code here export const useQuery = { AllProducts: (args: QueryArgsWithInput ) => hooks.useQueryWithInput ( WunderGraphContext, { operationName: 'AllProducts', requiresAuthentication: false, } )(args), ProductByID: (args: QueryArgsWithInput ) => hooks.useQueryWithInput ( WunderGraphContext, { operationName: 'ProductByID', requiresAuthentication: false, } )(args), } // more existing code. Change nothing. ``` \ Fine; you can probably celebrate a little now. \ As you can tell, WunderGraph has given you two hooks at your disposal, that you can use while building your site - `AllProducts`, and `ProductByID`. Both take inputs; the former, a pagination limit, and the latter, well...an ID to filter by, of course. \ **3. Build the Next.js Frontend** \ Good news; most of our heavy lifting is done. From now on, we're living entirely in UI land. If you're familiar with Next.js, this should be a breeze. All we'll be doing is building a frontend for our eCommerce app, using those 2 hooks that were exported in the previous step. \ ```javascript import Head from 'next/head' import '../styles/global.css' function MyApp({ Component, pageProps }) { return ( <> ) } export default MyApp ``` **Your _app.tsx File** \ ```javascript import { NextPage } from 'next' /* WG generated hooks */ import { useQuery, withWunderGraph } from '../components/generated/nextjs' /* my components */ import NavBar from '../components/NavBar' import ProductCard from '../components/ProductCard' import Snipcart from '../components/Snipcart' /* types */ import { result } from '../types/AllProductsResult' const Home: NextPage = () => { const allProducts = useQuery.AllProducts({ input: { a: { pageSize: 10 } }, }).result as result return ( {allProducts.data ? ( <> {allProducts.data.backend_products.data.map((product) => { return ( <ProductCard id={product.id} title={product.attributes.title} image={product.attributes.image} description={product.attributes.description} price={product.attributes.price} rating={product.attributes.review_score} reviews={product.attributes.review_count} /> ) })} ) : ( <> Loading... )} ) } export default withWunderGraph(Home) ``` **Your index.tsx File** \ ```javascript /* NextJS stuff */ import Image from 'next/image' import { useRouter } from 'next/router' /* my styles */ import styles from './ProductCard.module.css' type Props = { id: string title: string image: string price: number description?: string rating: number reviews: number } const ProductCard = (props: Props) => { const router = useRouter() // handle click on Product Image const routeTo = (productId) => { router.push({ pathname: `/products/${productId}`, }) } return ( routeTo(props.id)} className="img" src={props.image} alt="Product image" height={300} width={300} /> routeTo(props.id)}>{props.title} {props.rating}⭐ {props.reviews} ${props.price} {/* Add 🛒 */} Add 🛒 ) } export default ProductCard ``` **Your ProductCard.tsx File** \ ```javascript /* WG generated hooks */ import { useQuery, withWunderGraph } from '../../components/generated/nextjs' /* NextJS stuff */ import Image from 'next/image' import { useRouter } from 'next/router' /* my components */ import NavBar from '../../components/NavBar' /* types */ import { result } from '../../types/OneProductResult' type Props = {} const Product = (props: Props) => { const router = useRouter() const { id } = router.query const productId: string = id as string // needed because id as is will be of type string[] | string (union) const oneProduct = useQuery.ProductByID({ input: { id: productId }, }).result as result const data = oneProduct.data?.backend_products?.data[0].attributes return ( {data?.title} ${data?.price} {data?.description} {data?.review_score} ⭐ {data?.review_count} reviews Add To Cart 🛒 ) } export default withWunderGraph(Product) ``` **Your \[id\].tsx File**\[ ### **4. Implement cart management with Snipcart** \ Snipcart provides an end-to-end cart management and checkout solution for any webapp, shipping as custom scripts and stylesheets to make integration trivial. \ Once you've signed up, double-checked to make sure you're in Test mode, and have your public API key (and stored it in your `.env.local` file), you're all set. \ Just one change: instead of adding Snipcart scripts (get them [here](https://docs.snipcart.com/v3/setup/installation) ) manually to our app's ` ` tags, we'll create a component for them and include that in our `Index.tsx` instead. \ ```javascript /* NextJS stuff */ import Script from 'next/script' const Snipcart = () => { return ( <> <Script id="show-cart" dangerouslySetInnerHTML={{ __html: ` window.SnipcartSettings = { publicApiKey: "${process.env.NEXT_PUBLIC_SNIPCART_API_KEY}", loadStrategy: "on-user-interaction", modalStyle: "side", }; (function(){var c,d;(d=(c=window.SnipcartSettings).version)!=null||(c.version="3.0");var s,S;(S=(s=window.SnipcartSettings).currency)!=null||(s.currency="usd");var l,p;(p=(l=window.SnipcartSettings).timeoutDuration)!=null||(l.timeoutDuration=2750);var w,u;(u=(w=window.SnipcartSettings).domain)!=null||(w.domain="cdn.snipcart.com");var m,g;(g=(m=window.SnipcartSettings).protocol)!=null||(m.protocol="https");var f,v;(v=(f=window.SnipcartSettings).loadCSS)!=null||(f.loadCSS=!0);var E=window.SnipcartSettings.version.includes("v3.0.0-ci")||window.SnipcartSettings.version!="3.0"&&window.SnipcartSettings.version.localeCompare("3.4.0",void 0,{numeric:!0,sensitivity:"base"})===-1,y=["focus","mouseover","touchmove","scroll","keydown"];window.LoadSnipcart=o;document.readyState==="loading"?document.addEventListener("DOMContentLoaded",r):r();function r(){window.SnipcartSettings.loadStrategy?window.SnipcartSettings.loadStrategy==="on-user-interaction"&&(y.forEach(function(t){return document.addEventListener(t,o)}),setTimeout(o,window.SnipcartSettings.timeoutDuration)):o()}var a=!1;function o(){if(a)return;a=!0;let t=document.getElementsByTagName("head")[0],n=document.querySelector("#snipcart"),i=document.querySelector('src[src^="'.concat(window.SnipcartSettings.protocol,"://").concat(window.SnipcartSettings.domain,'"][src$="snipcart.js"]')),e=document.querySelector('link[href^="'.concat(window.SnipcartSettings.protocol,"://").concat(window.SnipcartSettings.domain,'"][href$="snipcart.css"]'));n||(n=document.createElement("div"),n.id="snipcart",n.setAttribute("hidden","true"),document.body.appendChild(n)),$(n),i||(i=document.createElement("script"),i.src="".concat(window.SnipcartSettings.protocol,"://").concat(window.SnipcartSettings.domain,"/themes/v").concat(window.SnipcartSettings.version,"/default/snipcart.js"),i.async=!0,t.appendChild(i)),!e&&window.SnipcartSettings.loadCSS&&(e=document.createElement("link"),e.rel="stylesheet",e.type="text/css",e.href="".concat(window.SnipcartSettings.protocol,"://").concat(window.SnipcartSettings.domain,"/themes/v").concat(window.SnipcartSettings.version,"/default/snipcart.css"),t.prepend(e)),y.forEach(function(h){return document.removeEventListener(h,o)})}function $(t){!E||(t.dataset.apiKey=window.SnipcartSettings.publicApiKey,window.SnipcartSettings.addProductBehavior&&(t.dataset.configAddProductBehavior=window.SnipcartSettings.addProductBehavior),window.SnipcartSettings.modalStyle&&(t.dataset.configModalStyle=window.SnipcartSettings.modalStyle),window.SnipcartSettings.currency&&(t.dataset.currency=window.SnipcartSettings.currency),window.SnipcartSettings.templatesUrl&&(t.dataset.templatesUrl=window.SnipcartSettings.templatesUrl))}})(); `, }} /> ) } export default Snipcart ``` \ Once that's done, all we have to do is add Snipcart's necessary props to provide cart metadata wherever we have a ` ` to add an item to cart. \ ```javascript // Add to Cart button in ProductCard.tsx Add 🛒 ``` \ All done! Just make sure you've [read their docs](https://docs.snipcart.com/v3/) , as this article is **not** a comprehensive tutorial for Snipcart's API. \ ## Summing it Up And that's all, folks! Hopefully, this tutorial has given you an insight into how you can leverage the power of the JAMstack with WunderGraph to go above and beyond what you could do with JAMstack tooling alone. \ Meaningfully separating the frontend and the backend - then bridging the gap between them, and doing it in a secure way to boot - is probably the most common pain point when it comes to building webapps. A new paradigm like the JAMstack - while making the web much easier, much faster for developers and users alike, comes with its own set of *gotchas* and the tedium of writing glue code. \ Used with JAMstack and GraphQL as a service layer/BFF, WunderGraph remedies most of these pain points, making sure you concern yourself with only business logic, and building and shipping awesome stuff to your customers. A full end-to-end solution, without any additional dependencies. \ ## **About the author** Prithwish Nath is a full-stack web developer who's a little too attached to the "always be building" philosophy. When he's not working on parser-based adventure game engines, he's probably rocking out to The Tragically Hip (again), or in the kitchen perfecting his aglio e olio. Check him out at https://medium.com/@prithwish.nath. --- Also Published [Here](https://wundergraph.com/blog/how_to_build_a_graphql_ecommerce_app_from_scratch)

Building a GraphQL eCommerce App from Scratch

Too Long; Didn't Read

Companies Mentioned

@wunderstef

RELATED STORIES