编程生成Gatsby页面而不从Graphql中插入
我在WordPress中建立了一个名为Projects的ACF选项页面
在“项目选项”页面中，有一个ACF中继器，允许用户添加多个项目。
在Gatsby中，我使用Graphql在两个文件中查询我的项目的数据：
自定义钩子中的
- ，允许访问Gatsby站点
中的全局数据。
在gatsby-node.js文件中生成一个名为project-details.js的模板页面的
- 。
显然，在ACF选项页面中，这个中继器字段在Graphql中没有弹格。相反，我正在根据每个Project中继器字段中的嵌套标题文本字段生成一个片段。
我使用replaceAll()和toLowerCase()方法来创建弹格，然后将其作为数据的一部分提供。
这是我的定制钩子：
export const useProjectsQueryAlt = () => {
const data = useStaticQuery(graphql`
query ProjectsQueryAlt {
wp {
projects {
projects {
allprojects {
projectContent
projectTitle
featuredImage {
mediaItemUrl
id
}
projectGallery {
caption
id
mediaItemUrl
}
}
}
}
}
}
`)
const project = data.wp.projects.projects.allprojects.map(node => {
const { projectContent, projectTitle, featuredImage, projectGallery } = node;
const title = node.projectTitle;
const spacesToHyphen = title.replaceAll(' ', '-');
const slugFromTitle = spacesToHyphen.toLowerCase()
return {
projectContent,
projectTitle,
slug: slugFromTitle,
featuredImage,
projectGallery: projectGallery.map(node => {
const { caption, id, mediaItemUrl } = node;
return {
caption,
id,
mediaItemUrl
}
})
}
})
return { project }
}下面是我的gatsby节点文件：
const path = require('path')
exports.createPages = async ({ graphql, actions }) => {
const { data } = await graphql(`
query Projects {
wp {
projects {
projects {
allprojects {
projectTitle
}
}
}
}
}
`)
data.wp.projects.projects.allprojects.forEach(node => {
const title = node.projectTitle;
const spacesToHyphen = title.replaceAll(' ', '-');
const slugFromTitle = spacesToHyphen.toLowerCase()
actions.createPage({
path: '/projects/' + slugFromTitle,
component: path.resolve('./src/templates/project-details.js'),
context: { slug: slugFromTitle },
})
})
}这是我的模板文件项目-细节。
import React from 'react'
function ProjectDetails() {
return (
<div>
...my page template content
</div>
)
}
export default ProjectDetails现在，我需要找到一种方法来检查我的“project”模板文件中两个附加的片段是否匹配，以便将相关的项目数据显示到相应的URL中。
当我在前端生成我的弹格时，遵循Gatsby文档动态生成页面并不符合我的用例。我希望有人对这个用例有经验，并能为我指明正确的方向。
回答 1
Stack Overflow用户
发布于 2022-05-16 16:56:41
您的方法中的问题是，您正在基于项目的title生成一个“假”段塞，因此您不能使用该字段来过滤任何GraphQL节点，因为该字段不在项目字段中。最好的选择是使用title本身或使用任何自动生成的标识符(如果它是作为字段存在的话，则使用id)。
actions.createPage({
path: '/projects/' + slugFromTitle,
component: path.resolve('./src/templates/project-details.js'),
context: { title },
})注意:您可以省略{ title: title }
您仍然可以使用生成的段塞的path，这是一种有效的方法。
我假设如果title是一个唯一的字段，那么slug也必须是，因此您将是一个有效的筛选器。
现在在project-details.js
import React from 'react'
function ProjectDetails({ data }) {
console.log("my data is", data);
return (
<div>
...my page template content
</div>
)
}
export const query = graphql`
query($title: String!) {
yourACFNode(title: { eq: $title} ) {
# your fields
}
}
`
export default ProjectDetails当然，调整上面的查询以匹配您的ACF节点，但是获得该方法。
https://stackoverflow.com/questions/72262177
复制相似问题
腾讯云开发者
