beamercola-gatsby-source-shopify v3.2.2
gatsby-source-shopify
Source plugin for pulling data into Gatsby from Shopify stores via the Shopify Storefront API.
Features
- Provides public shop data available via the Shopify Storefront API
- Supports
gatsby-transformer-sharp
andgatsby-image
for product and article images
Install
npm install --save gatsby-source-shopify
How to use
Ensure you have an access token for the Shopify Storefront API. The token should have the following permissions:
- Read products, variants, and collections
- Read product tags
- Read content like articles, blogs, and comments
Then in your gatsby-config.js
add the following config to enable this plugin:
plugins: [
/*
* Gatsby's data processing layer begins with “source”
* plugins. Here the site sources its data from Shopify.
*/
{
resolve: "gatsby-source-shopify",
options: {
// The domain name of your Shopify shop. This is required.
// Example: 'gatsby-source-shopify-test-shop' if your Shopify address is
// 'gatsby-source-shopify-test-shop.myshopify.com'.
// If you are running your shop on a custom domain, you need to use that
// as the shop name, without a trailing slash, for example:
// shopName: "gatsby-shop.com",
shopName: "gatsby-source-shopify-test-shop",
// An API access token to your Shopify shop. This is required.
// You can generate an access token in the "Manage private apps" section
// of your shop's Apps settings. In the Storefront API section, be sure
// to select "Allow this app to access your storefront data using the
// Storefront API".
// See: https://help.shopify.com/api/custom-storefronts/storefront-api/getting-started#authentication
accessToken: "example-wou7evoh0eexuf6chooz2jai2qui9pae4tieph1sei4deiboj",
// Set the API version you want to use. For a list of available API versions,
// see: https://help.shopify.com/en/api/storefront-api/reference/queryroot
// Defaults to 2019-07
apiVersion: "2020-01",
// Set verbose to true to display a verbose output on `npm run develop`
// or `npm run build`. This prints which nodes are being fetched and how
// much time was required to fetch and process the data.
// Defaults to true.
verbose: true,
// Number of records to fetch on each request when building the cache
// at startup. If your application encounters timeout errors during
// startup, try decreasing this number.
paginationSize: 250,
// List of collections you want to fetch.
// Possible values are: 'shop' and 'content'.
// Defaults to ['shop', 'content'].
includeCollections: ["shop", "content"],
// Download Images Locally
// set to false if you plan on using shopify's CDN
downloadImages: true,
// default image URL
// if you set downloadImages to false then it will set all localFile of file from this URL this is to make graphQL types unchanged
defaultImageURL:
"https://raw.githubusercontent.com/mrhut10/gatsby/Feature/gatsby-source-shopify/downloadImagesOption/packages/gatsby-source-shopify/src/default.png",
},
},
]
NOTE: By default, all metafields are private. In order to pull metafields, you must first expose the metafield to the Storefront API.
How to query
You can query nodes created from Shopify using GraphQL like the following:
Note: Learn to use the GraphQL tool and Ctrl+Spacebar at
http://localhost:8000/___graphql
to discover the types and properties of your
GraphQL model.
{
allShopifyProduct {
edges {
node {
id
title
handle
productType
vendor
variants {
id
title
price
}
}
}
}
}
All Shopify data is pulled using the Shopify Storefront API. Data is made available in the same structure as provided by the API, with a few exceptions noted below.
The following data types are available:
Name | Description |
---|---|
Article | A blog entry. |
Blog | Collection of articles. |
Comment | A comment on a blog entry. |
Collection | Represents a grouping of products that a shop owner can create to organize them or make their shops easier to browse. |
Product | Represents an individual item for sale in a Shopify store. |
ProductOption | Custom product property names. |
ProductVariant | Represents a different version of a product, such as differing sizes or differing colors. |
ShopPolicy | Policy that a merchant has configured for their store, such as their refund or privacy policy. |
For each data type listed above, shopify${typeName}
and
allShopify${typeName}
is made available. Nodes that are closely related, such
as Article
and Comment
, are provided as node fields as described below.
Note: The following examples are not a complete reference to the available fields for each node. Utilize Gatsby's built-in GraphQL tool to discover the types and properties available.
Query articles
The associated blog data is provided on the blog
field. Article comments are
provided on the comments
field.
{
allShopifyArticle {
edges {
node {
id
author {
email
name
}
blog {
title
}
comments {
id
author {
email
name
}
contentHtml
}
contentHtml
publishedAt(formatString: "ddd, MMMM Do, YYYY")
}
}
}
}
Query blogs
Blog data is provided on the blog
field on Article
, but it can be queried
directly like the following:
{
allShopifyBlog {
edges {
node {
id
title
url
}
}
}
}
Query article comments
Comments are provided on the comments
field on Article
, but they can be
queried directly like the following:
{
allShopifyComment {
edges {
node {
id
author {
email
name
}
contentHtml
}
}
}
}
Query product collections
Products in the collection are provided on the products
field.
{
allShopifyCollection {
edges {
node {
id
descriptionHtml
handle
image {
src
alt
}
products {
id
handle
title
}
title
}
}
}
}
Query products
Product variants and options are provided on the variants
and options
fields.
{
allShopifyProduct {
edges {
node {
id
descriptionHtml
handle
images {
originalSrc
}
variants {
id
availableForSale
image {
originalSrc
}
price
selectedOptions {
name
value
}
sku
title
}
title
}
}
}
}
Query product options
Product options are provided on the options
field on Product
, but they can
be queried directly like the following:
{
allShopifyProductOption {
edges {
node {
id
name
values
}
}
}
}
Query product variants
Product variants are provided on the variants
field on Product
, but they
can be queried directly like the following:
{
allShopifyProductVariant {
edges {
node {
id
availableForSale
image {
originalSrc
}
price
selectedOptions {
name
value
}
sku
title
}
}
}
}
Query shop policies
Shop policies include the following types:
- Privacy Policy (
privacyPolicy
) - Refund Policy (
refundPolicy
) - Terms of Service (
termsOfService
)
The type of policy is provided on the type
field. Policies can be queried
like the following:
{
allShopifyShopPolicy {
edges {
node {
body
title
type
}
}
}
}
Query pages
Shopify merchants can create pages to hold static HTML content.
{
allShopifyPage {
edges {
node {
id
handle
title
body
bodySummary
}
}
}
}
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 any image field on a node. Image processing of inline images added to description fields is currently not supported.
To access image processing in your queries, you need to use this pattern, where
...ImageFragment
is one of the gatsby-transformer-sharp
fragments:
{
allShopifyProduct {
edges {
node {
id
images {
localFile {
childImageSharp {
...ImageFragment
}
}
}
}
}
}
}
Full example:
{
allShopifyProduct {
edges {
node {
id
images {
localFile {
childImageSharp {
resolutions(width: 500, height: 300) {
...GatsbyImageSharpResolutions_withWebp
}
}
}
}
}
}
}
}
To learn more about image processing, check the documentation of gatsby-plugin-sharp.
Site's gatsby-node.js
example
const path = require("path")
exports.createPages = async ({ graphql, boundActionCreators }) => {
const { createPage } = boundActionCreators
const pages = await graphql(`
{
allShopifyProduct {
edges {
node {
id
handle
}
}
}
}
`)
pages.data.allShopifyProduct.edges.forEach(edge => {
createPage({
path: `/${edge.node.handle}`,
component: path.resolve("./src/templates/product.js"),
context: {
id: edge.node.id,
},
})
})
}
A note on customer information
Not all Shopify nodes have been implemented as they are not necessary for the
static portion of a Gatsby-generated website. This includes any node that
contains sensitive customer-specific information, such as Order
and
Payment
.
If you are in need of this data (e.g. building a private, internal website), please open an issue. Until then, the nodes will not be implemented to lessen the chances of someone accidentally making private information publicly available.