javascript - CraftCMS Gatsby 项目抛出错误“GraphQL 错误预期类型 [String],找到 {eq: $slug}。”
问题描述
我刚开始与 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 模板能够呈现各个活动数据。
解决方案
我终于让我的一位同事看看我的代码。我所要做的就是将我的 $slug 变量放在括号中,如下所示:
entries (section: "campaigns", slug: [$slug] )
那是我希望我能回来的两天。
推荐阅读
- python - I'm trying to make an API in python that receives data in JSON
- react-admin - Customize List as Cards
- sql - append the query with custom data modifications to add more
- php - How to use GROUP BY method in php-mysql
- javascript - Cannot Add Option List to Multiple Select jQuery
- javascript - 如何在 Angular 应用程序中包含 Telegram 登录小部件?
- user-interface - How to set correct sizes from Adobe Illustrator / Sketch to flutter?
- javascript - 内容编辑后如何更改单元格背景?
- python - 如何在鼠标单击时在 FigureCanvasQTAgg 上画一个圆圈
- sql - 如何自动增加主键?