This repository has been deprecated. Plugin has been moved here
gatsby-source-shopify's Introduction
gatsby-source-shopify's People
Forkers
stackpoet paveli davidpaulsson fnebenfuehr ascorbic smethews amandasaffer rococo-digital josephani rmcfadzean northxsouth joernroeder ajmalhakeem origenstudio isabella232 novosoftcodegatsby-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
andgatsby serve
, requiringgatsby clean
in between eachserve
to get the correct data - This behavior is also reflected in GraphiQL, filtering to show the same product both times
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?
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.
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
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.
Update
In the graphql explorer, this is how my images are coming through
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
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
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. ๐๐๐
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google โค๏ธ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.