Shopify Question posted in
The Shopify help center can be found here.

Gatsby Shopify not creating individual pages

I am working with a basic Gatsby Shopify website template here https://www.gatsbyjs.com/docs/building-an-ecommerce-site-with-shopify/

I am creating a products list page and also creating product specific pages per the example. When the app completely loads after I do gatsby develop I see the allShopifyProduct call in the graphql explorer but before the build, I see the following error

ERROR #11321  PLUGIN

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

Cannot read property 'allShopifyProduct' of undefined

  31 |   // Iterate over all products and create a new page using a template
  32 |   // The product "handle" is generated automatically by Shopify
> 33 |   result.data.allShopifyProduct.edges.forEach(({ node }) => {
     |               ^
  34 |     createPage({
  35 |       path: `/product/${node.handle}`,
  36 |       component: path.resolve(`./src/templates/product.js`),

File: gatsby-node.js:33:15

After the server loads, I see this

enter image description here

So because of this, I am getting a HTTP 404 when I query a specific product like this

http://localhost:8000/product/short-sleeve-t-shirt

Not sure what I am doing wrong or how to get around this.

Tags:

2

Answers


  1. 0

    If you have followed that guide or similar you should have stored your Shopify data in environment variables. Gatsby, by default, uses .env.development file for gatsby develop and .env.production file for gatsby build.

    If your code is working only in one environment, your issue may come because you haven’t set the .env.production with the variables, making Gatsby unavailable to reach Shopify and unable to infer the schema to be resolved by your GraphQL query.

    My guess is that you are missing the .env.production file. Just create it in the root of your project as .env.development.

    Resources using gatsby-source-shopify plugin:

    Login or Signup to reply.
  2. 0

    What ended up fixing this issue for me was that the Gatsby example was looking for API data that was no longer available in Shopify – specifically the availableForSale parameter. Once I removed this from the GraphQL query example in gatsby-node.js and reran the dev build it generated the templated pages as expected. Make sure to read the entire error that is coming back and see if you can pinpoint where it’s failing for you.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search