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's
gatsby-node.jsexample
in README file