时间戳

首页 > 解决方案 > GatsbyJS GraphQL 查询是否与编写它的组件相关联？

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

问题描述

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

我目前的解决方案是传递一个graphql查询变量$slug，它是页面路径，即/about/通过onCreatePage钩子 in 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();
  });
};

layout/index.js在过滤基本元内容时添加一个 graphql 查询，

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

以及在字段（来自 yaml 文件）与查询变量匹配的每个页面上的更通用的 graphql 查询：path$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. 对于我想要实现的目标，是否有更好的解决方案？

标签： javascriptreactjsgraphqlgatsby

解决方案

  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

推荐阅读