我刚开始与 Gatsby 合作,看看以 Craft 作为后端、Gatsby 作为前端来重建我公司的 CraftCMS 网站是否是一个不错的选择。到目前为止,一切都运行良好,直到需要查询我们的“活动”频道中的各个条目。
作为记录,我已经能够使用 .map() 为“整体视图”页面上的每个活动条目呈现完整列表,以查看所有活动。我还能够递归地构建每个活动页面,以便它调用我的 /src/templates/campaign-page.js 模板并从我网站的 Craft API 中毫无问题地提取正确的 slug。出于某种原因,我无法在campaign-page.js 模板中查询我的个人广告系列数据。
我已经阅读了 Gatsby 文档中的每一页以及当前存在的每个教程,但是对于我的生活,我无法弄清楚为什么我的 GraphQL 查询不会过滤我的个人活动条目。它只是一直告诉我,“GraphQL 错误预期类型 [String],找到 {eq: $slug}。”
我还尝试根据一些降价文档将我的“slug:{eq:$slug}”包装在“过滤器:”中,但这只是告诉我“过滤器”不存在。我开始认为问题出在我的 gatsby-node.js 文件,但是当我将它与文档进行比较时,我没有看到任何问题。
Gatsby-node.js
const path = require(`path`)
exports.createPages = async ({ actions, graphql }) => {
const { data } = await graphql(`
query {
api {
entries(section: "campaigns") {
slug
}
}
}
`)
data.api.entries.forEach(({ slug }) => {
actions.createPage({
path: "/campaigns/" + slug,
component: path.resolve(`./src/templates/campaign-page.js`),
context: {
slug: slug,
},
})
})
}
Campaign-page.js
export default ({data}) => {
const post = data.api.entries
return(
<div className={"campaign-page-single"} style={{marginTop: '-21px,'}}>
<Header/>
<div>
<h1>{post.id}</h1>
</div>
</div>
)
}
export const campaignQuery = graphql`
query ($slug: String!){
api{
entries (slug: { eq: $slug }){
slug
id
... on API_campaigns_campaigns_Entry {
id
campaignTitle
slug
}
}
}
}
`
作为参考,以下是我的主要活动列表中的典型工作查询的样子。 js 页面列出了所有可用的活动:
query = {graphql`
{
api {
entries(section: "campaigns") {
... on API_campaigns_campaigns_Entry {
id
campaignTitle
uri
slug
}
}
}
}
`}
我希望我的 /src/templates/campaign-page.js 模板能够呈现各个活动数据。