Migrate to Netlify Today

Netlify announces the next evolution of Gatsby Cloud. Learn more

ContactSign Up
Community Plugin
View plugin on GitHub

This plugin is used to source product data from builder.io and the checkout API.

How To publish:

npm publish --access=public

How this works:

On build:

  1. query all the productPage pages that exist
  2. query the product selector for each productPage
  3. get the list of references to ProductVariant
  4. fetch product data from the checkout API for each ProductVariant
  5. merge the checkout API data with the builder data to generate a productPageData node with the following shape:
    id: "",
    path: "",
    productSelector: {
        onetime: {
            products: [],
            discounts: []
        subscription: {
            products: [],
            discounts: []

The productPage page template should have a single page query that queries productPageData where path = ‘$path’ to get all the product data for that specific productPage.

We aren’t querying allBuilderModels since they don’t include refs so instead we query our own data type ‘productPageData’

Improvement opportunities:

  • use gatsby cache to cache requests in gatsby-node.js to improve build times
  • create graphql fragments to simplify page queries
  • create a distinction between otp and subs products in builder.io
  • do a single request to the checkout API in sourceNodes per page rather than a request per product (checkoutSDK can query a list of products)
© 2023 Gatsby, Inc.