Today, we’re excited to share gatsby-source-shopify v7 and to highlight the developer experience improvements it brings.
👉 TLDR: v7 Migration Guide
With v5, we migrated to Shopify’s Bulk Operation API in order to support Incremental Builds. Together, these improvements made it possible to build large, complex storefronts with Gatsby and made data updates 16x faster (132 seconds -> 8 seconds). In v6, we added Gatsby 4 support to enable DSG and SSR. And with this new major release, we’re focusing on developer experience and the ergonomics of using the source plugins.
“We used to maintain our own fork of gatsby-source-shopify for our clients. With version 7 we no longer have to worry about that. The DX has improved tremendously, allowing us to focus our efforts on building visually stunning websites for our clients rather than constantly fighting with the Shopify API and data logic.” —Byron Hill, Atomic Digital Studio
Product Media
First up, the `product.images` field has been deprecated in favor of `product.media` which makes it possible to incorporate more types of media like product videos and 3D models into your Gatsby sites.models.
For example:
Schema Parity
In previous versions, the created GraphQL schema was quite a bit different from Shopify’s Admin API schema. In v7, we worked to get as close to schema parity as possible. This means you can use the Shopify API documentation for most of the fields. This saves you from having to understand the differences between Gatsby’s internal data layer and Shopify’s API.
Metafields
v7 introduces Metafields. This will allow you to query for a specific metafield by namespace and key. Returning a single metafield reduces data requirements on pages and marks the end of having to filter through metafields to get the data you need on the client-side.
For example:
Custom Apps
As of January 2022, Shopify deprecated support for Private Apps. Use Custom Apps in place of Private Apps. These function similarly, but you’ll need to Allow custom app development the next time you generate API keys.
Aftering creating a custom app, remember to go to the Configuration tab and enable the Admin API access scopes that are required by gatsby-source-shopify.
Bulk Operations
Starting in v5, gatsby-source-shopify uses the Admin API’s Bulk Operation to circumvent the API rate-limiting and data complexity limitations of the Storefront API. Bulk Operations can be difficult to work with because they’re limited to one concurrent operation per API key. We highly recommend generating a unique API keys for every machine building your site: this enables you to run multiple, concurrent bulk operations.
And much, much more!
This release includes many other miscellaneous improvements. For example, collections, variants, images, and other types of data were returned in an unexpected order. Now they are returned as ordered in Shopify admin.
Is there something else you’d like to see in the next major release of Gatsby’s Shopify integration? Send an email to jack@gatsbyjs.com with any feedback!