Create static commerce sites with Gatsby

#javascript #webdev #gatsby

Today we are excited to introduce a new way you can query products with Commerce.js when building static sites with Gatsby.

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 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 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

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

Step 2 - Configure

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

Step 3 - Query

{
  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. Explore the Chec query types, and start building your website or app.

We’ve also made it even easier to work with Gatsby Image 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.

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