Create static commerce sites with Gatsby
Tags: javascript, webdev, gatsby
Published: 2020-10-09 22:05:18

Today we are excited to introduce a new way you can query products with [Commerce.js](https://commercejs.com/) when building static sites with [Gatsby](https://www.gatsbyjs.com/).

Static Site Generators (SSGs) really took off in 2019. One of the most notable SSGs to dominate the space has been Gatsby. Gatsby is a React-based, open source framework for creating websites and apps.

However, don’t be fooled by Static Site Generators. While they offer huge benefits for decreasing the time it takes for your product pages to load, it doesn’t mean they’re static. Once loaded, your blazing-fast static eCommerce store transforms via React hydration, giving you a real app-like look and feel, with a sprinkle of Commerce.js for managing cart and checkout.

With Gatsby now being a staple for front-end developers, we’ve made a [Gatsby source plugin](https://github.com/chec/gatsby-source-chec) and are excited to get this into the hands of as many developers as possible. We’ve even seen community contributions for other SSGs since we started working on this, so it’s clear that this area is moving fast. 

The Gatsby ecosystem consists of plugins, source plugins, and themes. Plugins enable you to inject scripts like Commerce.js, and source plugins allow you query data from almost any data source using GraphQL, meanwhile themes allow you to embed full Gatsby sites inside your existing Gatsby site.

We built the `@chec/gatsby-source` plugin to remove the boilerplate we’ve seen Commerce.js users write over the last year when working with Gatsby. We invite you to give it a try, and [submit any feedback](https://github.com/chec/gatsby-source-chec/issues) you have.

If you’re running a Gatsby site already, it’s incredibly easy to enable commerce to your project. Simply install the source plugin and query for products, categories, and information about your merchant account.

## Step 1 - Install

```bash
npm install @chec/gatsby-source-chec # yarn add @chec/gatsby-source
```

## Step 2 - Configure

```js
// In your gatsby-config.js
plugins: [
  {
    resolve: '@chec/gatsby-source-chec',
    options: {
      publicKey: '...'
    }
  }
]
```

## Step 3 - Query

```js
{
  checMerchant {
    id
    business_name
  }

  allChecCategory {
    nodes {
      name
      slug
      description
      created
      id
    }
  }

  allChecProduct {
  	nodes {
	    id
	    name
	    price {
    		formatted_with_symbol
	    }
	  }
  }
}
```
The best place to get started exploring query types is [GraphiQL](https://www.gatsbyjs.com/docs/running-queries-with-graphiql/). Explore the Chec query types, and start building your website or app.

We’ve also made it even easier to work with [Gatsby Image](https://using-gatsby-image.gatsbyjs.org/) by automatically downloading product image assets, and creating local nodes for each. This means you can take advantage of all the features Gatsby Image brings, and serve product images even quicker alongside your static site.

To opt-in to downloading image assets automatically, enable `downloadImageAssets` inside your plugin options.

```js
// In your gatsby-config.js
plugins: [
  {
    resolve: '@chec/gatsby-source-chec',
    options: {
      publicKey: '...',
      downloadImageAssets: true
    }
  }
]
```

You can see an example in the source plugin repository [here](https://github.com/chec/gatsby-source-chec/tree/master/demo), and [watch a short video series](https://www.youtube.com/watch?v=LAJFFoC7vgs&list=PLs2PzMqLzi7V-9AdKXo6E_aHXWK23TJ-W) on building with this plugin.

If you’re new to Gatsby, they have a handful of useful recipes to get started - [start building with Gatsby today](https://www.gatsbyjs.com/docs/).