gatsbyjs/gatsby-source-shopify

This repository has been deprecated. Plugin has been moved here

gatsby-source-shopify's Issues

Querying Orders: Cannot read property 'id' of null

What happens:

If you include orders in your shopifyConnections when there are no orders yet, the terminal throws the following error.

What should happen:
It should check the length of orders before looping to prevent the error.

info Creating nodes from bulk operation ORDERS

 ERROR

[object Object] Cannot read property 'id' of null



  TypeError: Cannot read property 'id' of null

Exclude variant images on the main images

Hi is there a way that all variant images will be excluded on the images array? (edges -> node -> images)
In my design, my thumbnail images is from (edges -> node -> images) and the problem is it includes my variant color images which is not what we wanted. I only want my variant color images shows on my variant color sections.

Product/variant metafields consistently inaccessible through cache (incremental builds)

This is a somewhat specific issue which may be difficult to reproduce but the long story short I'm seeing here is:

• Using 5.0.0-rc.21
• Defining a product fragment pulling both product-level and variant-level metafields (below)
• Running gatsby clean and then running the development server pulls in all the data I would expect (ie, matches Shopify)
• Killing the development server and running it again results in missing metafield data (logging out the product data makes it clear that the metafield arrays are inexplicably empty)
• Running gatsby clean and re-running the development server again pulls all the metafield data
• This is also reflected with gatsby build and gatsby serve, requiring gatsby clean in between each serve to get the correct data
• This behavior is also reflected in GraphiQL, filtering to show the same product both times
  • First build:
  • Second build:

Product fragment used throughout my project:

fragment ProductFragment on ShopifyProduct {
    id
    shopifyId
    storefrontId
    handle
    description
    title
    tags
    productMetafields: metafields {
      productId
      internal {
        type
      }
      value
      namespace
      key
    }
    priceRangeV2 {
      minVariantPrice {
        amount
      }
      maxVariantPrice {
        amount
      }
    }
    options {
      name
      values
    }
    images {
      gatsbyImageData
    }
    variants {
      title
      id
      compareAtPrice
      availableForSale
      inventoryQuantity
      price
      shopifyId
      storefrontId
      selectedOptions {
        name
        value
      }
      product {
        images {
          gatsbyImageData
        }
      }
      variantMetafields: metafields {
        productVariantId
        key
        namespace
        value
      }
    }
  }

Is this somehow expected behavior or are there any obvious things I should be looking into to fix this? Currently it's resolvable by just always clearing the cache but that's a bit time-consuming and, to my knowledge, this never used to be necessary before adding the product-level metafield information (which I believe was recently merged in, here: #134)

[DEP0066] DeprecationWarning

Error durring build

I don't have any blog entries in the Shopify shop. This does not break the build, I just get the error. Thought someone should know that there seems to be a deprecated headers in outgoingMessage.prototype.

gatsby-source-shopify/checkout.shopifyshop.com fetched and processed Blog nodes
error (node:1282) [DEP0066] DeprecationWarning: OutgoingMessage.prototype._headers is deprecated

Versions

"gatsby": "^3.5.1",
"gatsby-source-shopify": "^4.6.0",

Missing onError handler for invocation 'building-schema', error was 'Error: Schema must contain uniquely named types but contains multiple types named "GatsbyImageLayout".

Hi all.

First of all, thanks for the cool and useful plugin.
I am currently working on a site that will access Shopify data as well as Sanity data (CMS).
The following plugins are used to access the two data stores:

gatsby-config.js:

{
  resolve: 'gatsby-source-sanity',
  options: {
    projectId: process.env.GATSBY_SANITY_PROJECT_ID,
    dataset: process.env.GATSBY_SANITY_DATASET,
    watchMode: true,
  },
},
{
  resolve: 'gatsby-source-shopify',
  options: {
    apiKey: process.env.SHOPIFY_ADMIN_API_KEY,
    password: process.env.SHOPIFY_ADMIN_PASSWORD,
    storeUrl: process.env.SHOPIFY_STORE_URL,
  },
},

If I now start the dev server with "gatsby develop", I am getting the following error:

_`Missing onError handler for invocation 'building-schema', error was 'Error: Schema must contain uniquely named types but contains multiple types named "GatsbyImageLayout".'.
Stacktrace was 'Error: Schema must contain uniquely named types but contains multiple types named "GatsbyImageLayout".
at new GraphQLSchema (/Users/alainkaiser/Documents/source/alainkaiser/easymining.ch-frontend/node_modules/graphql/type/schema.js:194:15)
at SchemaComposer.buildSchema (/Users/alainkaiser/Documents/source/alainkaiser/easymining.ch-frontend/node_modules/graphql-compose/lib/SchemaComposer.js:179:12)
at buildSchema (/Users/alainkaiser/Documents/source/alainkaiser/easymining.ch-frontend/node_modules/gatsby/src/schema/schema.js:76:33)
at build (/Users/alainkaiser/Documents/source/alainkaiser/easymining.ch-frontend/node_modules/gatsby/src/schema/index.js:105:18)
at buildSchema (/Users/alainkaiser/Documents/source/alainkaiser/easymining.ch-frontend/node_modules/gatsby/src/services/build-schema.ts:19:3)'

⠦ building schema`_

I am using the following versions:

"gatsby-source-sanity": "^7.0.0"
"gatsby-source-shopify": "rc"

The whole build process is stuck at the "building schema" step.

After some testing, I have noticed that the build works if I use only one of the two plugins, either "gatsby-source-sanity" or "gatsby-source-shopify". However, the plugins do not work together. Has anyone already had experience with a similar error or an idea for a workaround?

Thanks in advance for the help!

Collection product order changes randomly in development

I'm working on a site with collections, and I've noticed the product order keeps changing when I run gatsby clean/develop. It usually just reverses the collection from newest products first, to oldest first, but other times one of the newer products is sprinkled into the old ones.

It would be amazing if we could specify product order in the graphql collections call, or maintain the Shopify collection product order 🙏

Not all collections are being sourced in development

I'm working on a Shopify store with 50+ collections, but only 48 are being sourced by Gatsby. The missing collections aren't being generated by gatsby-node, and I can't query them with the graphql explorer

I've tried:

• gatsby clean
• installing the latest version of gatsby-source-shopify-experimental
• checking the API permissions within Shopify
• checking collection availability on the collections that aren't appearing

None of these solutions have worked. Any idea of what could prevent the missing collections from being sourced?

Could not source from bulk operation: null on Gatsby Cloud

I'm on the latest version "5.0.0-rc.14", and collections are all showing now which is great, however I've noticed Gatsby Cloud is running into an error when deploying now.

I've tried deploying through Netlify and thats all working fine, also running gatsby build locally is fine.

I've since rolled back to "5.0.0-rc.13" which has the same issue, but rolling back to "5.0.0-rc.12" fixes the issue so I think the problem must have been introduced in "5.0.0-rc.13".

ERROR #gatsby-source-shopify_111001 when downloadImages set to True

Building with downloadImages: false works just fine and building with downloadImages: true works fine with the same Shopify site/app credentials when using the stable gatsby-source-shopify plugin.

However on version rc-16, when I try building with downloadImages: true, I receive the following output:

info Creating nodes from bulk operation PRODUCTS

ERROR #gatsby-source-shopify_111001

Could not source from bulk operation

TypeError: Cannot read property 'preview' of null
  
  - node-builder.ts:140 
    [shopify-new]/[gatsby-source-shopify]/src/node-builder.ts:140:22
  
  - node-builder.ts:73 processChildImage
    [shopify-new]/[gatsby-source-shopify]/src/node-builder.ts:73:19
  
  - node-builder.ts:131 Product
    [shopify-new]/[gatsby-source-shopify]/src/node-builder.ts:131:11
  
  - runMicrotasks
  
  - task_queues.js:93 processTicksAndRejections
    internal/process/task_queues.js:93:5
  
  - node-builder.ts:184 buildNode
    [shopify-new]/[gatsby-source-shopify]/src/node-builder.ts:184:7
  
  - make-source-from-operation.ts:119 
    [shopify-new]/[gatsby-source-shopify]/src/make-source-from-operation.ts:119:
    26
  
  - async Promise.all
  
  - make-source-from-operation.ts:110 sourceFromOperation
    [shopify-new]/[gatsby-source-shopify]/src/make-source-from-operation.ts:110:
    7
  
  - gatsby-node.ts:70 sourceAllNodes
    [shopify-new]/[gatsby-source-shopify]/src/gatsby-node.ts:70:5
  
  - gatsby-node.ts:189 Object.sourceNodes
    [shopify-new]/[gatsby-source-shopify]/src/gatsby-node.ts:189:5
  
  - api-runner-node.js:434 runAPI
    [shopify-new]/[gatsby]/src/utils/api-runner-node.js:434:16

Missing allShopifyArticle query

We are in the process of migrating to the new version of the plugin and it seems like allShopifyArticle query implementation is missing in the current implementation. Is there a workaround?

variant no specific image?

Hi, I want to map all my variants and get the one specific image but the returns is all mix images so how I possibly get the one correctly if this all mix? is there a way?

Using gatsby-plugin-image processor outside of graphql

Might be an odd question, but I have images coming from shopify graphql as the plugin has intended.

I also have shopify JSON data that comes down from my CMS (Prismic, it has a Shopify plugin). So I have the Shopify image urls, but i'd like to run them through gatsby-plugin-image as well. Is there an exposed function that I can give it a shopify url and it returns the srcset that gatsby-plugin-image needs?

Thanks!

Collections are always missing one product

So I've successfully switched to the experimental source plugin instead of Storefront one, but one strange issue I can't wrap my head around:

When I go the way ShopifyCollection.products, I am always missing one product. Expect 6 products for specific Collection, only get 5. Expect 3, only get 2. Expect 2, only get 1.

I suspect it might have to do with this line. Expected products 6, so i = 6-1 = 5 and j = 5-1 = 4. And since j-- it might be missing one.

What's the best way to filter out products that aren't active on the Shopify store?

In the previous version of this plugin, I didn't have to filter the products being generated, or included in my collection queries based on product.isAvailableForSale (now deprecated, so I guess it would be product.status === "ACTIVE"), I think it just magically did it for me. In this new package, I'm seeing unpublished products included on my site both when creating pages with gatsby-node, and within my collection queries.

This isn't such a big deal when it comes to product page generation, as you can quickly setup something like this in gatsby-node:

// Product Pages
  productPages.data.allShopifyProduct.edges.forEach(edge => {
    if (edge.node.status === "ACTIVE") {
      createPage({
        path: `/products/${edge.node.handle}`,
        component: path.resolve("./src/templates/product-template.js"),
        context: {
          handle: edge.node.handle,
        },
      });
    }
    return null;
  });

But I'm wondering what is the best way to handle filtering available products from collection.products queries, like the following:

export const query = graphql`
  query($handle: String!) {
    collectionsNode: allShopifyCollection(filter: { handle: { eq: $handle } }) {
      edges {
        node {
          title
          description
          status
          products {
            options {
              name
              values
            }
            vendor
            priceRangeV2 {
              maxVariantPrice {
                amount
              }
            }
            handle
            images {
              id
              altText
              gatsbyImageData
            }
            productType
            shopifyId
            tags
            title
            variants {
              compareAtPrice
              availableForSale
              price
              selectedOptions {
                name
                value
              }
              shopifyId
            }
          }
        }
      }
    }
}'

Should I always plan to filter in a useEffect function or is there a better way to handle it?

Really appreciate all the work going into this 🙌!

getShopifyImage) is not a function

Currently having an issue with using getShopifyImage whereby I'm getting an error: getShopifyImage) is not a function:

Here's my code:

import React, { useContext, useMemo } from "react"
import { StoreContext } from "../../components/context/StoreContext"
import { css } from "@emotion/css"
import { formatPrice } from "../utils/format-price"
import { GatsbyImage } from "gatsby-plugin-image"
import { getShopifyImage } from "gatsby-source-shopify"

export function LineItem({ item }) {
  const { checkout } = useContext(StoreContext)

  const variantImage = {
    ...item.variant.image,
    originalSrc: item.variant.image.src,
  }

  const image = useMemo(
    () =>
      getShopifyImage({
        image: variantImage,
        layout: "constrained",
        crop: "contain",
        width: 160,
        height: 160,
      }),
    // eslint-disable-next-line react-hooks/exhaustive-deps
    [variantImage.src]
  )

  return (
    <div>
      <div>
        {image && (
          <GatsbyImage
            key={variantImage.src}
            image={image}
            alt={variantImage.altText ?? item.variant.title
          />
        )}
      </div>
      <div
        className={css`
          padding-bottom: 2rem;
        `}
        key={item.id}
      >
        <h4>{item.title}</h4>
        <p>Quantity: {item.quantity}</p>
        <p>
          {formatPrice(checkout.currencyCode, item.variant.price)}
          {/* {item.variant.price} */}
        </p>
      </div>
    </div>
  )
}

Any thoughts? I've been scratching my head for quite a bit!

Checkout for users with accounts

We are noticing some customers being sent to a url which does not exist upon clicking checkout.

https://domain.com/account/login?checkout_url=https%3A%2F%2Fdomain.myshopify.com%2F16487927%2Fcheckouts%2F4748e0b77bf411ddb1d0a%3Fkey%3Dd8e0717178b49cfb459%26step%3Dcontact_information

It appears to be happening for anyone who previously had an account with the shopify store. I have switched off accounts in shopify checkout and am waiting to see if that prevents the issue but I would like to support accounts in the future.

I don't fully understand why this is happening and would appreciate if anyone has any idea.

Multiple instances with prefix?

Is it possible to call multiple instances of this source plugin and set different prefixes? Sort of what you can with gatbsy-source-graphql.

I have this use case as we use different Shopify stores for different regions. I’d like mysite.com/eu/product/ to use data from our Shopify European store whilst mysite.com/us/product uses data from our Shopify US store, etc. (we have 4 different Shopify stores in total)

Barcode Field on Product Variant Request

Please could you add the barcode field to the data pulled in by the product variant as per the attached image so it is then accessible through graphql. This field seems to have been overlooked in past plugins whereas it is pretty essential if say for instance you want to search products via barcode.

Removing a variant from a product kicks off a build but doesn't remove the variant from the site

We've noticed that when a variant is removed from a product this change not reflected on the site, a build is kicked off via the Shopify 'Data Source Integration' in Gatsby Cloud but the variant is not removed on the live site.

Potentially related to #145.

Variant Images

In my store I use the Variant Images to select from a radio. In the past the variant object always had an image object that pulled from shopify. Though I'm not seeing it in the new plugin. Is there a way to query these images out?

New Image Issues

Just installed the latest @rc update, but now my collection queries are throwing the following error. My queries haven't changed, so I assume it's an issue with the node-model. Let me know your thoughts.

Error

What is the best way to pull the respective products of Shopify Collections?

In the previous Shopify plugin, the products of a collection were available on allShopifyCollection. In the new plugin, products are not available on collection nodes, so what's the best way to pull those products on that collection page?

bug: Stuck at "cancelling last operation" with code change

When having https://github.com/gatsbyjs/gatsby-starter-shopify set up in Gatsby Cloud and a first build is run (now it has warm cache), a subsequent code change (e.g. changing a page component, other component) triggers a new build.

But this build is stuck at the "cancelling last operation" stage.

Cancelling the build and running a cold build manually solves this.

Build fails with - Missing onError handler for invocation 'building-schema'

When using the option downloadImages: false the build fails with
ERROR
Missing onError handler for invocation 'building-schema', error was 'Error: Schema must contain uniquely named types but contains multiple types named "GatsbyImageLayout".'. Stacktrace was 'Error: Schema must contain uniquely named types but contains multiple types named
"GatsbyImageLayout".

Cannot Query Articles or Pages

I am transitioning from the original gatsby-source-shopify plugin. We query the articles and pages in Shopify and it seems like this plugin doesn't do that. Is that in the roadmap or is there something I am missing?

Shopify Collection Product Images Undefined Param

I just updated to 1.14.1, and when I try to load my product images on my collection page, all of the Shopify cdn urls are appending undefined as a param, and the images won't appear.

Example here

Update
In the graphql explorer, this is how my images are coming through

Explorer

It looks like there is a problem with sourcing the images where gatsby-plugin-image rearranges the URL

Would appreciate any suggestions on resolving this 🙏

[object Object] undefined

There's not a lot of information - but when running gatsby build this is what it spits out

info Cache is cold, running a clean build

 ERROR 

[object Object] undefined



  Error: 

not finished source and transform nodes - 0.453s
not finished Source from bulk operation PRODUCTS - 0.402s

error Command failed with exit code 1.

AllShopifyCollections empty value

Why there is no results in shopify collections?

Metafields on Collection

Out of the box, Collection does support metafields (and privateMetafields) (see Admin API doc). Can these be added to the plugin?

I don't really understand how the productVariantId lands on ShopifyMetafield right now, but I'll try to find out and submit a PR.

Failed to validate error [Error [ValidationError]: "error" must be of type object]

Not sure why I'm getting this error but I've tried with two Shopify stores and getting the same issue on both, both with 'gatsby develop' and 'gatsby build'. I'm using version "1.16.0" of the plugin on Gatsby version "3.1.2". This is 'downloadImages' set to true.

info Creating nodes from bulk operation PRODUCTS Failed to validate error [Error [ValidationError]: "error" must be of type object] { _original: { context: { sourceMessage: 'Could not source from bulk operation' }, error: 'failed to process https://cdn.shopify.com/s/files/1/0423/3884/4822/products/green_cord_1_3__1_4a8beb30-9608-4f4a-b026-97651df7e29d.png?v=1598292902\n' + "TimeoutError: Timeout awaiting 'send' for 30000ms", pluginName: 'gatsby-source-shopify-experimental', text: 'Could not source from bulk operation', level: 'ERROR', category: 'THIRD_PARTY', stack: [], docsUrl: 'https://gatsby.dev/issue-how-to', code: 'gatsby-source-shopify-experimental_111001' }, details: [ { message: '"error" must be of type object', path: [Array], type: 'object.base', context: [Object] } ] }

ERROR #gatsby-source-shopify_111001 Could not source from bulk operation

I have setup my shopify private app, configured environment variables and added the plugin to the gatsby-config.js file according to the README, but am receiving the following error when I run gatsby develop