Programmatically create pages in Gatsby with Shopify Collection

Question

I am building a site with Gatsby and Shopify. What I want to do is programmatically create pages for each product in a collection. I got the code working to do it for all products as per the tutorial. Now I am trying to edit the graph QL query to only return the product in a collection.

gatsby develop runs fine but when I try and go to the page I get a 404

Code:

    const path = require(`path`)
exports.createPages = async ({ graphql, actions }) => {
  const { createPage } = actions
  // Query for all products in Shopify
  const result = await graphql(`
    query {
      shopifyCollection(id: {eq: "Shopify__Collection__Z2lkOi8vc2hvcGlmeS9Db2xsZWN0aW9uLzI3NDc2ODE2NzA3Mw=="}) {
        products {
          title
                shopifyId
                description
                handle
                priceRange {
                  minVariantPrice {
                    amount
                  }
                }
                images {
                  originalSrc
                }
                variants {
                  price
                  title
                }
            
        }
      }
    }
  `)
  // Iterate over all products and create a new page using a template
  // The product "handle" is generated automatically by Shopify
  result.data.shopifyCollection.products.forEach(({ node }) => {
    createPage({
      path: `/products/${node.handle}`,
      component: path.resolve(`./src/pages/products.js`),
      context: {
        query: node,
      },
    })
  })
}

When I run the query in the ___graphq tool I get this data back:

{
  "data": {
    "shopifyCollection": {
      "products": [
        {
          "title": "Chicken and Roast Winter Vege",
          "shopifyId": "Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0LzY4ODUzNjc5NzIwMDE=",
          "description": "",
          "handle": "chicken-salad",
          "priceRange": {
            "minVariantPrice": {
              "amount": "0.0"
            }
          },
          "images": [
            {
              "originalSrc": "https://cdn.shopify.com/s/files/1/0439/1183/9905/products/Chicken_RoastVege.jpg?v=1627374225"
            }
          ],
          "variants": [
            {
              "price": "0.00",
              "title": "Default Title"
            },
            {
              "price": "0.00",
              "title": "default"
            }
          ]
        },
        {
          "title": "Classic Dinners",
          "shopifyId": "Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0LzY4ODUzMzMzNjg5OTM=",
          "description": "Experience Aotearoa's most affordable delivered meal kit. Packed full of ingredients for 5 classic family favourite meals with portion sizes to suit whānau small and large. $85 for 2 people, $95 for 4 and $130 for 6. Get recipes emailed each week or check out our community Facebook group to get inspired and share your own creations. Want to save a trip to the shop? Add on milk, bread, eggs and other pantry essentials. Try it out yourself and embrace the value!",
          "handle": "classic-dinners",
          "priceRange": {
            "minVariantPrice": {
              "amount": "85.0"
            }
          },
          "images": [
            {
              "originalSrc": "https://cdn.shopify.com/s/files/1/0439/1183/9905/products/classic_dinners_socialV2.jpg?v=1627372974"
            }
          ],
          "variants": [
            {
              "price": "85.00",
              "title": "2 / Reg"
            },
            {
              "price": "100.00",
              "title": "2 / GF"
            },
            {
              "price": "95.00",
              "title": "4 / Reg"
            },
            {
              "price": "130.00",
              "title": "4 / GF"
            },
            {
              "price": "130.00",
              "title": "6 / Reg"
            },
            {
              "price": "160.00",
              "title": "6 / GF"
            }
          ]
        }
      ]
    }
  },
  "extensions": {}
}

Could someone please point me in the right direction?

Answer 1

gatsby develop runs fine but when I try and go to the page I get a 404

This means that despite you have no code errors (that may potentially break the compilation) you are not generating the product page. You can easily test it by accessing the 404 page in gatsby develop mode. By default, it displays a list of all created pages. You won't see your products.

In this case, I think your issue is coming from the way you are mapping the nodes. To me, it should be like:

  result.data.shopifyCollection.products.forEach((product) => {
    createPage({
      path: `/products/${product.handle}`,
      component: path.resolve(`./src/pages/products.js`),
      context: {
        query: product,
      },
    })
  })

You were destructuring the iterable variable in ({ node }), and, because you have no node inside products it was returning an undefined variable.

I don't know your implementation in the template (./src/pages/products.js) to know if sending the whole object will work in your use case. But certainly, now your products page should be created.