reactjs - 使用 Shopify Collection 在 Gatsby 中以编程方式创建页面

Question

我正在用 Gatsby 和 Shopify 建立一个网站。我想要做的是以编程方式为集合中的每个产品创建页面。根据教程，我得到了所有产品的代码。现在我正在尝试编辑图形 QL 查询以仅返回集合中的产品。

gatsby develop 运行良好，但是当我尝试转到该页面时，我得到了 404

代码：

    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,
      },
    })
  })
}

当我在 ___graphq 工具中运行查询时，我得到了这些数据：

{
  "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": {}
}

有人可以指出我正确的方向吗？

标签： reactjsshopifygatsbygatsby-plugin

Answer 1

gatsby develop 运行良好，但是当我尝试转到该页面时，我得到了 404

这意味着尽管您没有代码错误（可能会破坏编译），但您并没有生成产品页面。gatsby develop您可以通过在模式下访问 404 页面来轻松测试它。默认情况下，它会显示所有已创建页面的列表。你不会看到你的产品。

在这种情况下，我认为您的问题来自您映射节点的方式。对我来说，它应该是这样的：

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

您正在解构 中的可迭代变量({ node })，并且因为您没有node在products其中返回一个undefined变量。

我不知道您在模板 ( ./src/pages/products.js) 中的实现，以了解发送整个对象是否适用于您的用例。但可以肯定的是，现在应该创建您的产品页面。