{"_id":"@gatsbyjs/gatsby-source-shopify","_rev":"54-64d5bb9cebe0f64f45785f72b511b912","name":"@gatsbyjs/gatsby-source-shopify","dist-tags":{"latest":"2.0.0-rc.0","rc":"2.0.0-rc.0"},"versions":{"2.0.0-rc.0":{"name":"@gatsbyjs/gatsby-source-shopify","version":"2.0.0-rc.0","author":"","license":"ISC","_id":"@gatsbyjs/gatsby-source-shopify@2.0.0-rc.0","maintainers":[{"name":"sslotsky","email":"saxosamo@gmail.com"},{"name":"rachelbahl","email":"rachel@gatsbyjs.com"},{"name":"kylemathews","email":"mathews.kyle@gmail.com"},{"name":"dschau","email":"dustinschau@gmail.com"},{"name":"pieh","email":"misiek.piechowiak@gmail.com"},{"name":"wardpeet","email":"ward@coding-tech.com"},{"name":"sidharthachatterjee","email":"me@sidharthachatterjee.com"},{"name":"jamo","email":"jamo@isotalo.fi"},{"name":"vladar","email":"vladimir.razuvaev@gmail.com"},{"name":"tylerbarnes","email":"tyler@known.design"},{"name":"ascorbic","email":"m@mk.gg"},{"name":"fk","email":"sechskilo@gmail.com"},{"name":"smthomas","email":"shane@codekarate.com"},{"name":"lekoarts","email":"lekoarts@gmail.com"},{"name":"laurieontech","email":"npm.laurie@gmail.com"},{"name":"dmccraw","email":"dustinmccraw@yahoo.com"},{"name":"abhiaiyer","email":"abhiaiyer91+npm@gmail.com"},{"name":"julienp","email":"julien@caffeine.lu"}],"homepage":"https://github.com/gatsbyjs/gatsby-source-shopify-experimental#readme","bugs":{"url":"https://github.com/gatsbyjs/gatsby-source-shopify-experimental/issues"},"dist":{"shasum":"bb2bd3fb7cf66adc3abca9293ae27c9396ab8716","tarball":"https://registry.npmjs.org/@gatsbyjs/gatsby-source-shopify/-/gatsby-source-shopify-2.0.0-rc.0.tgz","fileCount":200,"integrity":"sha512-e8NujuwClUsHTdEhXGew9RS+F4chfqeG/yHXIbAmdD/9ZCSP+ahnrbNcq04VW33OT4lCqXesFVaBae+sw9Vgsg==","signatures":[{"sig":"MEUCIGHpoKwSEjS7I89jLZWwE3uBrTYyUWGLkGLVMuh6T8juAiEAkVMdobHgc3MPkUUYBrteCUyCKyAOrA+bfv51fL6D9wA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":911216,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWhc0CRA9TVsSAnZWagAAnQAQAKTIn3z2pVhQiOyQtBBa\n5ER/H2gSCcuaGgYiocn6eE21QeZzjyA0zoX4xWqWTC5ketwrl2ac70A0OEwG\nmOtiS89Iwi0EnPuJ4wQ+DnkhNWrxR2KIRCECIE5hviivR7DfghJ+7recinHT\ntczcWALDgyf0a6kE+1qJP6VA27e38MA2LvtWpTd4B902Z2t7kCZDHgcWACFt\nRWyg7jlK2H1a0TAXLIg7uvh4pMcUCdGjtk1/oPJpjbXfTE+nxIEuUWdcG9gE\nq+4suIaDWCenlMuk4nRejlWmPjzbBUXLE7PLUcjtQw6KSDUlfAXiVEYh4Bxa\nuxWE8UelHN3Q5Yx8mwsaXA+lXov+l81ARWpE4+SAnI/6DWuYRjRkyJvcBSTX\nt+zBYR8MK4Rig4qPQZCJfmtJt+Fwvxe6Ua1uBozWYcgjEYUEDZl70ZuHpYke\niGwHqjbic05Z6zV0hgYfRJ+P2QiqiL4i3QJM01ByKkmncCTCXxK+7CKmgJPo\nm5Y7gtDfBhQgs0DaSGeMVKPbY7Yss50xtnOcz7bMpJDcOiHa/5P3fK5rOlOo\nNlAH/Pg0NyYyAOFslB9Ua1j7ZcwYGyOXhtWhWrfrUI4BKJOSCPkSGsH762dJ\nnpNCxVbmc3B5ifEjBnESYzzQOWLjLHJ5+JiP+8vJ/9IGGaPR8IveZS5LtCEP\nAwNL\r\n=O5/I\r\n-----END PGP SIGNATURE-----\r\n"},"scripts":{"test":"jest","build":"tsc --outDir .","watch":"tsc-watch --outDir .","prepublish":"yarn build && cp ../README.md .","test:debug":"node --inspect-brk node_modules/.bin/jest --runInBand --verbose=false"},"_npmUser":{"name":"sslotsky","email":"saxosamo@gmail.com"},"repository":{"url":"git+https://github.com/gatsbyjs/gatsby-source-shopify-experimental.git","type":"git"},"_npmVersion":"6.12.0","description":" [](https://codecov.","directories":{},"_nodeVersion":"12.13.0","dependencies":{"node-fetch":"^2.6.1","gatsby-source-filesystem":"^2.10.0"},"_hasShrinkwrap":false,"devDependencies":{"msw":"^0.27.1","jest":"^26.6.3","ts-jest":"^26.5.3","prettier":"^2.2.1","tsc-watch":"^4.2.9","typescript":"^4.2.3","@types/jest":"^26.0.20","gatsby-plugin-image":"^1.1.0"},"peerDependencies":{"gatsby-plugin-image":"^1.1.0"},"_npmOperationalInternal":{"tmp":"tmp/gatsby-source-shopify_2.0.0-rc.0_1616516915774_0.6590794568374714","host":"s3://npm-registry-packages"}}},"time":{"created":"2021-03-23T16:28:35.488Z","modified":"2026-06-30T21:59:41.140Z","2.0.0-rc.0":"2021-03-23T16:28:35.977Z"},"bugs":{"url":"https://github.com/gatsbyjs/gatsby-source-shopify-experimental/issues"},"license":"ISC","homepage":"https://github.com/gatsbyjs/gatsby-source-shopify-experimental#readme","repository":{"url":"git+https://github.com/gatsbyjs/gatsby-source-shopify-experimental.git","type":"git"},"description":" [](https://codecov.","maintainers":[{"email":"misiek.piechowiak@gmail.com","name":"pieh"},{"email":"mike.gualtieri@netlify.com","name":"mlgualtieri-gatsby"},{"email":"philippe.serhal@netlify.com","name":"serhalp-netlify"}],"readme":"\n[](https://codecov.io/gh/gatsbyjs/gatsby-source-shopify-experimental)\n\n\n# gatsby-source-shopify-experimental\n\nA scalable solution for sourcing data from Shopify.\n\nThis plugin works by leveraging [Shopify's bulk operations API][bulk-operations], which allows us to process large amounts of data at once. This gives us a more resilient and reliable build process. It also enables incremental builds so that your site can build quickly when you change your data in Shopify.\n\n## Getting started\n\nThis takes you through the minimal steps to see your Shopify data in your Gatsby site's GraphiQL explorer.\n\n### Install\n\nInstall this plugin to your Gatsby site.\n\n```\nnpm i gatsby-source-shopify-experimental gatsby-plugin-image\n```\n\n### Configure\n\nAdd the plugin to your `gatsby-config.js`, e.g.\n\n```js\nrequire(\"dotenv\").config();\n\nmodule.exports = {\n plugins: [\n {\n resolve: \"gatsby-source-shopify-experimental\",\n options: {\n apiKey: process.env.SHOPIFY_ADMIN_API_KEY,\n password: process.env.SHOPIFY_ADMIN_PASSWORD,\n storeUrl: process.env.SHOPIFY_STORE_URL,\n },\n },\n \"gatsby-plugin-image\"\n ],\n};\n```\n\n### Retrieving API Information from Shopify\n\nIn Shopify admin, `SHOPIFY_STORE_URL` is the Store address you enter when logging into your Shopify account. This typically is in the format of `myshop.myshopify.com`.\n\nOnce logged into Shopify admin, navigate to the `Apps` page and click the link at the bottom to `Manage private apps`. This will allow you to turn on private apps and create an app that Gatsby will use to access Shopify's Admin API.\n\nFor the Private app name enter `Gatsby` (the name does not really matter). Add the following under the `Active Permissions for this App` section:\n\n- `Read access` for `Products`\n- `Read access` for `Product listings` if you want to use Shopify's Product Collections in your Gatsby site\n- `Read access` for `Orders` if you want to use order information in your Gatsby site\n\n**Note: Enabling Cart and Checkout features**\n\nIf you are planning on managing your cart within Gatsby you will also need to check the box next to `Allow this app to access your storefront data using the Storefront API` and make sure to check `Read and modify checkouts`. This source plugin does not require Shopify Storefront API access to work, however, this is needed to add items to a Shopify checkout before passing the user to Shopify's managed checkout workflow. See [Gatsby Starter Shopify](https://github.com/gatsbyjs/gatsby-starter-shopify) for an example.\n\nClick the Save button and then click Create app to create your Private Shopify App. From there you can copy the API Key and Password from the Private app page and add them to your environment file for `SHOPIFY_ADMIN_API_KEY` and `SHOPIFY_ADMIN_PASSWORD` respectively.\n\n### Fire it up\n\nRun your site with `gatsby develop`. When the site builds successfully, you should see output like this:\n\n```\nYou can now view test-site in the browser.\n⠀\n http://localhost:8000/\n⠀\nView GraphiQL, an in-browser IDE, to explore your site's data and schema\n⠀\n http://localhost:8000/___graphql\n⠀\nNote that the development build is not optimized.\nTo create a production build, use gatsby build\n```\n\nNow follow the second link to explore your Shopify data!\n\n## Plugin options\n\n`apiKey: string`\n\nThe admin API key for the Shopify store + app you're using\n\n`password: string`\n\nThe admin password for the Shopify store + app you're using\n\n`storeUrl: string`\n\nYour Shopify store URL, e.g. some-shop.myshopify.com\n\n`shopifyConnections: string[]`\n\nAn optional array of additional data types to source.\n\nAccepted values: `'orders'`, `'collections'`\n\n`downloadImages: bool`\n\nNot set by default. If set to `true`, this plugin will download and process images during the build.\n\nThe plugin's default behavior is to fall back to Shopify's CDN.\n\n`typePrefix: string`\n\nNot set by default. If set to a string (example `MyStore`) node names will be `allMyStoreShopifyProducts` instead of `allShopifyProducts`.\n\n## Images\n\nWe offer two options for displaying Shopify images in your Gatsby site. The default option is to use the Shopify CDN along with [gatsby-plugin-image][gatsby-plugin-image], but you can also opt-in to downloading the images as part of the build process. Your choice will result in differences to the schema. Both options are explained below.\n\n### Use Shopify CDN\n\nThis is the default behavior and is intended to be used in conjunction with [gatsby-plugin-image][gatsby-plugin-image]. In this case, querying for image data from your Gatsby site might look like this:\n\n```gql\nproducts: allShopifyProduct(\n sort: { fields: [publishedAt], order: ASC }\n) {\n edges {\n node {\n id\n storefrontId\n featuredImage {\n id\n altText\n gatsbyImageData(width: 910, height: 910)\n }\n }\n }\n}\n```\n\nYou could then display the image in your component like this:\n\n```jsx\nimport { GatsbyImage } from \"gatsby-plugin-image\";\n\nfunction ProductListing(product) {\n return (\n \n );\n}\n```\n\n### Use runtime images\n\nIf you get Shopify images at runtime that don't have the `gatsbyImageData` resolver, for example from the cart or Storefront API, you can use the `getShopifyImage` function to create an imagedata object to use with ``.\n\nIt expects an `image` object that contains the properties `width`, `height` and `originalSrc`, such as [a Storefront API `Image` object](https://shopify.dev/docs/storefront-api/reference/common-objects/image).\n\n```jsx\nimport { GatsbyImage } from \"gatsby-plugin-image\";\nimport { getShopifyImage } from \"gatsby-source-shopify-experimental\";\n\nfunction CartImage(storefrontProduct) {\n // This is data from Storefront, not from Gatsby\n const image = storefrontProduct.images.edges[0].node;\n const imageData = getShopifyImage({ image, layout: \"fixed\", width: 200, height: 200 })\n\n return (\n \n );\n}\n\n```\n\n### Download up front\n\nIf you wish to download your images during the build, you can specify `downloadImages: true` as a plugin option:\n\n```js\nrequire(\"dotenv\").config();\n\nmodule.exports = {\n plugins: [\n {\n resolve: \"gatsby-source-shopify-experimental\",\n options: {\n apiKey: process.env.SHOPIFY_ADMIN_API_KEY,\n password: process.env.SHOPIFY_ADMIN_PASSWORD,\n storeUrl: process.env.SHOPIFY_STORE_URL,\n downloadImages: true,\n },\n },\n \"gatsby-plugin-image\"\n ],\n};\n```\n\nThis will make the build take longer but will make images appear on your page faster at runtime. If you use this option, you can query for your image data like this.\n\n```gql\nproducts: allShopifyProduct(\n sort: { fields: [publishedAt], order: ASC }\n) {\n edges {\n node {\n id\n storefrontId\n featuredImage {\n id\n localFile {\n childImageSharp {\n gatsbyImageData(width: 910, height: 910, placeholder: BLURRED)\n }\n }\n altText\n }\n }\n }\n}\n```\n\nThen you would use `gatsby-plugin-image` to render the image:\n\n```js\nimport { GatsbyImage, getImage } from \"gatsby-plugin-image\";\n\nfunction ProductListing(product) {\n const image = getImage(product.featuredImage.localFile);\n\n return ;\n}\n```\n\n## Limitations\n\nThe bulk API was chosen for resiliency, but it comes with some limitations. For a given store + app combination, only one bulk operation can be run at a time, so this plugin will wait for in-progress operations to complete. If your store contains a lot of data and there are multiple developers doing a clean build at the same time, they could be waiting on each other for a significant period of time.\n\nPossible workarounds include:\n\n1. Using a smaller test store for development so that bulk operations finish fast\n1. Creating multiple apps for the same store\n\n## Development\n\nThis is a yarn workspace with the plugin code in a `plugin/` folder and a test Gatsby site in the `test-site/` folder. After cloning the repo, you can run `yarn` from the project root and all dependencies for both the plugin and the test site will be installed. Then you compile the plugin in watch mode and run the test site. In other words,\n\n1. From the project root, run `yarn`\n1. `cd plugin`\n1. `yarn watch`\n1. Open a new terminal window to the `test-site/` folder\n1. `yarn start`\n\nSubsequent builds will be incremental unless you run `yarn clean` from the `test-site/` folder to clear Gatsby's cache.\n\nYou can also test an incremental build without restarting the test site by running `yarn refresh` from the `test-site/` folder.\n\n[bulk-operations]: https://shopify.dev/tutorials/perform-bulk-operations-with-admin-api\n[gatsby-plugin-image]: https://www.npmjs.com/package/gatsby-plugin-image\n","readmeFilename":"README.md"}