Community Plugin

gatsby-source-magento

Source plugin for pulling data into Gatsby from Magento2 sites using the Magento2 REST API.

Features

Pulls data from Magento2 sites
- Store Configuration
- Categories
- Products
- Images from Products
- Countries
- Product attributes
- Review if the modules divante/magento2-review-api is installed
Link products with Store Configuration
Link categories with Store Configuration
Link categories with products
Link images with products
Link review with product
Link products with configurable product

Install

npm install --save gatsby-source-magento

How to use

First, you need a way to pass environment variables to the build process, so secrets and other secured data aren’t committed to source control. We recommend using dotenv which will then expose environment variables. Read more about dotenv and using environment variables here. Then we can use these environment variables and configure our plugin.

// In your gatsby-config.js
module.exports = {
  plugins: [
    /*
     * Gatsby's data processing layer begins with “source”
     * plugins. Here the site sources its data from magento.
     */
    {
      resolve: 'gatsby-source-magento',
      options: {
        /*
         * The base URL of the Magento2 site without the trailingslash and the protocol. This is required.
         * Example : 'www.example-site.com'
         */
        baseUrl: 'www.example-site.com',
        // The protocol. This can be http or https.
        protocol: 'http',
        login: {
          username: 'admin',
          password: 'password',
        },
      },
    },
  ],
}

Test your Magento2 API

Before you run your first query, ensure the Magento2 JSON API is working correctly by visiting /rest/V1 at your Magento install.

How to query

You can query nodes created from Magento using GraphQL like the following: Note : Learn to use the GraphQL tool and Ctrl+Spacebar at http://localhost:3000/___graphiql to discover the types and properties of your GraphQL model.

Query Products

{
  allMagentoProduct {
    edges {
      node {
        id
        sku
        name
        description
        # ...
      }
    }
  }
}

Query Categories

{
  allMagentoCategory {
    edges {
      node {
        id
        name
      }
    }
  }
}

Query Store configurations

{
  allMagentoStoreConfig {
    edges {
      node {
        id
        code
        website_id
        locale
        base_currency_code
      }
    }
  }
}

Image processing

To use image processing you need gatsby-transformer-sharp, gatsby-plugin-sharp and their dependencies gatsby-image and gatsby-source-filesystem in your gatsby-config.js.

You can apply image processing to:

Product media_gallery_entries
Product image
Product small_image
Product thumbnail

To access image processing in your queries you need to use this pattern:

{
  imageFieldName {
    localFile {
      childImageSharp {
        ...ImageFragment
      }
    }
  }
}

Full example:

{
  allMagentoProducts {
    edges {
      node {
        image {
          localFile {
            childImageSharp {
              fixed(width: 500, height: 300) {
                ...GatsbyImageSharpFixed_withWebp
              }
            }
          }
        }
        media_gallery_entries {
          file {
            localFile {
              childImageSharp {
                fluid(maxWidth: 500) {
                  ...GatsbyImageSharpFluid_withWebp
                }
              }
            }
          }
        }
      }
      small_image {
        localFile {
          childImageSharp {
            fixed(width: 500, height: 300) {
              ...GatsbyImageSharpFixed_withWebp
            }
          }
        }
      }
      thumbnail {
        localFile {
          childImageSharp {
            fixed(width: 500, height: 300) {
              ...GatsbyImageSharpFixed_withWebp
            }
          }
        }
      }
    }
  }
}

To learn more about image processing check

documentation of gatsby-plugin-sharp,
source code of image processing example site.

Todo

[] add Verbos mode

[] add log

[] add Site'sgatsby-node.jsexample in README file