AlexanderProd/gatsby-shopify-starter

Shopify no longer supports shopifyProduct or allShopifyProduct in GraphQL queries

martinkean opened this issue · 13 comments

This plugin is out of date, please add a message to your README telling prospective users that Shopify no longer supports shopifyProduct or allShopifyProduct in GraphQL queries.

@martinkean This is surprising news, do you have a source? Thanks.

I could not get allShopifyProduct to show up in JSON from GraphQL. Instead I've installed gatsby-source-shopify-experimental into the gatsby-default-starter, which finally works. But I could not get this starter to work at all.

@martinkean gatsby-source-shopify works fine, those nodes are working no problem. I haven't tried the new "-experimental" version but am excited to test it out.

Thanks for your comments, for some reason I cannot get gatsby-shopify-starter to work. It works fine with the credentials that come with it, for the shop graphql.myshopify.com, but when I add my own I get
`File: gatsby-node.js:5:10

ERROR #11321 PLUGIN

"gatsby-node.js" threw an error while running the createPages lifecycle:

Cannot read property 'allShopifyProduct' of undefined

14 | }
15 | `).then(result => {

16 | result.data.allShopifyProduct.edges.forEach(({ node }) => {
| ^
17 | createPage({
18 | path: /product/${node.handle}/,
19 | component: path.resolve(./src/templates/ProductPage/index.js),

File: gatsby-node.js:16:17

TypeError: Cannot read property 'allShopifyProduct' of undefined

  • gatsby-node.js:16
    /Users/martink/gatsby/gatsby-shopify-martin-four/gatsby-node.js:16:17

  • api-runner-node.js:485 runAPI
    [gatsby-shopify-martin-four]/[gatsby]/src/utils/api-runner-node.js:485:16

info Total nodes: 46, SitePage nodes: 1 (use --verbose for breakdown)
failed createPages - 0.080s
success Checking for changed pages - 0.000s
success createPagesStatefully - 0.046s
success update schema - 0.016s
success write out redirect data - 0.003s
success Build manifest and related icons - 0.002s
`
and fails to build the dev bundle. I'm using the Storefront API access token and shop name (without .myshopify.com) for the credentials in the .env files. Any suggestions would be greatly appreciated!

On your own store, did you set your private app scopes correctly?

Then, in Shopify, you need to set each product to be available on that new app "channel".

Ahhhhh, sweet relief. I didn't realise each product needed to be assigned to the new app channel.
Can you briefly explain where I can check the private app scopes are set correctly?
Thanks for your prompt reply by the way, I struggled for hours trying to figure out why 'allShopifyProduct' appeared as 'undefined'

Here's a spot that mentions the scopes required:

https://www.gatsbyjs.com/docs/building-an-ecommerce-site-with-shopify/#setting-up-your-shopify-account

Enable the Shopify Storefront API by checking the box that says “Allow this app to access your storefront data using Storefront API”. Make sure to also grant access to read product and customer tags by checking their corresponding boxes.

The default scopes don't include that read product and customer tags boxes as checked.

Right, so I had just checked all those boxes anyway. BTW I'm using this as a model for my design students to learn new frameworks other than php-based CMS-es. Many thanks for your help!

No problem. You should checkout the shopify-buy SDK docs as well. They are useful to understand a lot of this starter!

Thanks for that. Don't want to take up your (or others') time, but, I'm still getting an error in the dev build:

ERROR #11321  PLUGIN
"gatsby-plugin-manifest" threw an error while running the onPostBootstrap lifecycle:
Input file contains unsupported image format
Error: Input file contains unsupported image format

Is your favicon some strange format? Try a png.

No, just the default png. I commented out and seems to work and build:

    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `gatsby-starter-default`,
        short_name: `starter`,
        start_url: `/`,
        background_color: `#663399`,
        theme_color: `#663399`,
        display: `minimal-ui`,
        // icon: `src/images/gatsby-icon.png`, This path is relative to the root of the site.
      },
    },

Great! Not sure why that would give you an issue.

Good luck with dev.