GatsbyJS GraphQL查询是否与编写组件绑定在一起?

时间:2018-06-21 06:30:15

标签: javascript reactjs graphql gatsby

我有几个带有元内容的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变量未反映正在呈现的页面组件。

哪个带给我我的问题-

  1. graphql查询是否与要写入的组件相关联?在这种特殊情况下-layout/index.js会一直是$slug path是什么吗?

  2. 是否可以打印出graphql变量,或者以某种方式验证给定时间点的变量是什么?

  3. 对于我要实现的目标是否有更好的解决方案?

1 个答案:

答案 0 :(得分:0)

  1. 我不太了解有关GraphQL查询绑定到何处的问题,但是当您了解到将slug作为变量传递给{{ 1}}函数在您的createPage文件中。因此,对于运行gatsby-node.js时创建的每个页面,createPage变量将是您传递给它的变量。

  2. 同样,在slug文件的gatsby-node.js函数中执行该操作。

  3. createPage将是您想要的“默认”或“基本”信息的更合适位置。查看示例gatsby-config.jsgatsby-config.js中有一些信息,然后与帖子的数据一起在blog-post.js template中进行查询。