gatsby-source-shopify-storefront
Source plugin for pulling product data into Gatsby from the Shopify Storefront API.
Install
npm install --save gatsby-source-shopify-storefront
How to use
// In your gatsby-config.js plugins: resolve: 'gatsby-source-shopify-storefront' options: // Your Shopify instance name (e.g. 'shopify-store-name', // if your shopify shop is located at https://shopify-store-name.myshopify.com/) siteName: 'shopify-store-name' // Your Shopify Storefront API access token // generated in the private apps section of your store admin. // Refer to Shopify's Storefront API Documentation for more information // https://help.shopify.com/api/storefront-api/getting-started accessToken: 'STOREFRONT_ACCESS_TOKEN'
GraphQL query to get all products
allShopifyProducts { edges { node { id title description descriptionHtml variants { edges { node { id title price selectedOptions { name value } } } } images { edges { node { id src } } } } } }
gatsby-node.js
example
Site's If you wish to create Gatsby Pages for each Shopify product, you can modify your gatsby-node.js
.
const _ = const Promise = const path = const slash = exports { const createPage = boundActionCreators return { // The “graphql” function allows us to run arbitrary // queries against the local Shopify graphql schema. Think of // it like the site has a built-in database constructed // from the fetched data that you can run queries against. // ==== PAGES (SHOPIFY PRODUCTS) ==== // ==== END PAGES ==== // resolve() must be called at the end so Gatsby knows that we're done adding pages. }}