Join us live as we unveil the all new Hygraph Studio!

GraphQL powered eCommerce with Snipcart

Learn how to use Hygraph with Snipcart for delivering epic commerce experiences.
Jamie Barton

Jamie Barton

Nov 23, 2021
Hygraph + Snipcart

eCommerce is one of the fastest growing use cases for headless content management over the last few years, as are the APIs powering checkout and payment. Hygraph was built with scalability in mind, and has all of the tools you need to power a fully bespoke eCommerce experience that your customers expect.

Depending on your scale, and how much you need to integrate with other services, there are dozens of commerce service providers to pick from.

Snipcart does things differently when it comes to enabling eCommerce. Snipcart is a drop-in cart and checkout that you can add with a few lines of code to any website. It works with digital and physical products, as well as subscriptions and has an events API that you can hook into to develop custom pre/post checkout integrations.

Add to Bag

As a developer, Snipcart is completely agnostic to the what you build, and what you use for the frontend. Snipcart works well with your current inventory — which is great if you're looking to sell your Hygraph backed inventory.

Let's take a look at a few ways you can use Hygraph with Snipcart. I'll assume you're familiar with Hygraph, so I will leave you to setup, configure and integrate Snipcart by following their documentation, and instantiate a GraphQL client for Hygraph.

#Hygraph for Products

I'll be using a simple content model and relationships between categories, products, prices, and the enumeration for currencies.

  • A Category has many Products
  • A Product belongs to one Category
  • A Product has many Prices
  • A Price belongs to one Product
CategoryProductPriceCurrency
Name (String)Name (String)Amount (Int)EUR
Slug (String)Slug (String)Currency (Enum)GBP
Products (Relation)DescriptionUSD
Image (Asset)
Prices (Relation)
Category (Relation)

Hygraph also gives you a "Commerce Shop" starter you can use to quickly bootstrap a project with some example data for products.

Hygraph Project Templates

#Fetching Products

You've probably seen a collection of all products before, to do this we can fetch all products, their fields, and relations with a single GraphQL query.

Product Grid

A query for this would look something like:

{
products {
id
name
slug
description {
html
}
image {
url
width
height
}
prices {
amount
currency
}
}
}

#Fetching Products by Category

Similar to fetching all products, it's also common to show pages of products per category. We can use the Hygraph GraphQL API to fetch a single Category by slug, and all of the products that belong to that category.

{
category(where: {slug: "tshirts"}) {
name
products {
id
name
slug
description {
html
}
image {
url
width
height
}
prices {
amount
currency
}
}
}
}

#Product Display Pages

As with any eCommerce store you'll most likely want to show a page for your product, including any additional images, prices, description, related products, and that important "Add to Bag" button.

Product Display Page

Snipcart makes this all too easy with adding attributes to a div with the options you want for your "Add to Bag" button.

<button
className="snipcart-add-item"
data-item-id="your-product-id"
data-item-price="your-product-price"
data-item-url="a-link-to-this-page"
data-item-image="your-product-image-asset-url"
data-item-name="your-product-name"
>
Add to Bag
</button>

Let's imagine we have the following query to fetch products by the slug:

query ProductPageQuery($slug: String!) {
product(slug: { eq: $slug }) {
id
name
prices {
amount
currency
}
description {
html
}
image {
url
}
}
}
}

You'll remember with the content model we had above that a Product has many Prices. Snipcart supports currencies, so we can specify the current for our product when adding to cart. You'll need to configure currencies within your Snipcart project for them to work properly though!

Hopefully this post has given you an idea of how you can use Hygraph as your PIM. Using Hygraph as a PIM can be done at scale in a similar way..

Blog Author

Jamie Barton

Jamie Barton

Jamie is a software engineer turned developer advocate. Born and bred in North East England, he loves learning and teaching others through video and written tutorials. Jamie currently publishes Weekly GraphQL Screencasts.

Share with others

Sign up for our newsletter!

Be the first to know about releases and industry news and insights.