GatsbyJS GraphQL 查询是否与编写它的组件相关联？

Question

我有几个包含元内容的 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 ...
...

我目前的解决方案是通过 gatsby-node.js 中的 onCreatePage 钩子传递一个 graphql 查询变量 $slug 即页面路径，即 /about/，

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();
  });
};

在layout/index.js过滤基础元内容中添加graphql查询，

query BasePageQuery {
  pagesYaml(path: { eq: "Base" }) {
    path
    pageTitle
    metaDescription
    ...
  }
}

还有一个更通用的 graphql 查询在每个页面上，其中字段 path（来自 yaml 文件）与查询变量 $slug 匹配：

query AboutPageQuery($slug: String) {
  pagesYaml(path: { eq: $slug }) {
    path
    pageTitle
    metaDescription
    ...
  }
}

我没有在每个页面上添加一个 graphql 查询，而是将这两个查询都添加到 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 仅返回基本内容并完全忽略我的第二个查询。看起来好像该查询与我的 layout/index.js 组件相关联，并且 $slug 变量没有反映正在呈现的页面组件。

这让我想到了我的问题 -

1. graphql 查询是否与编写它的组件相关联？在这种特殊情况下 - $slug 是否总是与 path layout/index.js 一样？

2. 有没有办法打印出 graphql 变量，或者以某种方式验证给定时间点的变量是什么？

3. 对于我想要实现的目标，有更好的解决方案吗？

Answer 1

1. 我不太明白 GraphQL 查询与何处相关的问题，但我认为当您了解您将 slug 作为变量传递给 createPage 函数时，您会更清楚在您的gatsby-node.js 文件中。因此，对于运行 createPage 时创建的每个页面，slug 变量将是您传递给它的任何内容。

2. 同样，在gatsby-node.js 文件中的createPage 函数中执行此操作。

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