使用 Shopify Collection 在 Gatsby 中以编程方式创建页面
Programmatically create pages in Gatsby with Shopify Collection
我正在使用 Gatsby 和 Shopify 构建网站。我想要做的是以编程方式为集合中的每个产品创建页面。根据 tutorial,我得到了适用于所有产品的代码。现在我正在尝试将图形 QL 查询编辑为仅 return 集合中的产品。
gatsby 开发 运行 很好,但是当我尝试转到该页面时,我得到一个 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. for 2 people, for 4 and 0 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": {}
}
有人能给我指出正确的方向吗?
gatsby develop runs fine but when I try and go to the page I get a 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 })
中的可迭代变量,并且由于您在 products
中没有 node
,它返回一个 undefined
变量。
我不知道您在模板 (./src/pages/products.js
) 中的实现,无法知道发送整个对象是否适用于您的用例。但可以肯定的是,现在您的产品页面应该已创建。
我正在使用 Gatsby 和 Shopify 构建网站。我想要做的是以编程方式为集合中的每个产品创建页面。根据 tutorial,我得到了适用于所有产品的代码。现在我正在尝试将图形 QL 查询编辑为仅 return 集合中的产品。
gatsby 开发 运行 很好,但是当我尝试转到该页面时,我得到一个 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. for 2 people, for 4 and 0 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": {}
}
有人能给我指出正确的方向吗?
gatsby develop runs fine but when I try and go to the page I get a 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 })
中的可迭代变量,并且由于您在 products
中没有 node
,它返回一个 undefined
变量。
我不知道您在模板 (./src/pages/products.js
) 中的实现,无法知道发送整个对象是否适用于您的用例。但可以肯定的是,现在您的产品页面应该已创建。