我有几个带有元内容的yaml文件,这些文件表示由Gatsby的数据源/转换系统提取的网站页面-其中一个文件看起来像这样:
path: /about/
pageTitle: About Us
metaDescription: Learn more about our team and what we do
...
我还有一个基本的Yaml文件,其中包含元内容,如果元内容丢失或不是为该页面特别编写的,则其他页面默认使用该元文件。
path: Base
pageTitle: Welcome to our website
metaDescription: We are the leading company of industry x in ...
...
我当前的解决方案是通过$slug
中的/about/
钩子传递作为页面路径的graphql查询变量onCreatePage
,
gatsby-node.js
在exports.onCreatePage = ({ page, boundActionCreators }) => {
const { createPage, deletePage } = boundActionCreators;
return new Promise(resolve => {
const oldPage = Object.assign({}, page);
deletePage(oldPage);
createPage({
...oldPage,
context: {
$slug: oldPage.path
}
});
resolve();
});
};
过滤中添加graphql查询以获取基本元内容
layout/index.js
和更通用的graphql查询在每个页面上,其中字段query BasePageQuery {
pagesYaml(path: { eq: "Base" }) {
path
pageTitle
metaDescription
...
}
}
(来自yaml文件)与查询变量path
相匹配:
$slug
我不是在每个页面上都添加一个graphql查询,而是在考虑将两个查询都添加到query AboutPageQuery($slug: String) {
pagesYaml(path: { eq: $slug }) {
path
pageTitle
metaDescription
...
}
}
中,而不必手动将上述查询添加到所有其他页面上。
layout/index.js
但是,它不能按预期方式工作-布局组件中的query BasePageQuery($slug: String) {
base: pagesYaml(path: { eq: "Base" }) {
path
pageTitle
metaDescription
...
}
page: pagesYaml(path: { eq: $slug }) {
path
pageTitle
metaDescription
...
}
}
仅返回基本内容,而完全忽略了我的第二个查询。似乎查询已绑定到我的this.props.data
组件,并且$ slug变量未反映正在呈现的页面组件。
哪个带给我我的问题-
graphql查询是否与要写入的组件相关联?在这种特殊情况下-layout/index.js
会一直是$slug
path
是什么吗?
是否可以打印出graphql变量,或者以某种方式验证给定时间点的变量是什么?
对于我要实现的目标是否有更好的解决方案?
答案 0 :(得分:0)
我不太了解有关GraphQL查询绑定到何处的问题,但是当您了解到将slug
作为变量传递给{{ 1}}函数在您的createPage
文件中。因此,对于运行gatsby-node.js
时创建的每个页面,createPage
变量将是您传递给它的变量。
同样,在slug
文件的gatsby-node.js
函数中执行该操作。
createPage
将是您想要的“默认”或“基本”信息的更合适位置。查看示例gatsby-config.js
。 gatsby-config.js
中有一些信息,然后与帖子的数据一起在blog-post.js
template中进行查询。