无法从 gatsby-config.js 多个查询 GrahQL 读取 siteMetadata 对象 - Gatsby ReactJS

【问题标题】：Can’t read siteMetadata object from gatsby-config.js multiple queries GrahQL - Gatsby ReactJS无法从 gatsby-config.js 多个查询 GrahQL 读取 siteMetadata 对象 - Gatsby ReactJS
【发布时间】：2020-10-02 07:54:04
【问题描述】：

我正在尝试使用 GraphQL 一次从多个查询中读取我在 gatsby-config.js 文件中定义的 siteMetadata 对象的内容。我有这个错误：

error  'siteMetadata' is not defined  no-undef

我的 JS 文件

export const pageQuery = graphql`
  query($slug: String!) {
    markdownRemark(frontmatter: { slug: { eq: $slug } }) {
      html
      frontmatter {
        date(formatString: "MMMM DD, YYYY")
        slug
        title
        logo
        about
        language
      }
    }

    site {
        siteMetadata {
          title
          description
          author
        }
      }
  } 
`

我打电话给

{siteMetadata.title}

【问题讨论】：

标签： reactjs graphql gatsby

【解决方案1】：

在您的gatsby-config.js 中，您应该有一个名为siteMetadata 的对象，其结构与您查询的结构相同：

module.exports = {
      siteMetadata: {
        title: `Some title`,
        description: `Some description`,
        author: `Some author`,
      },
  plugins: [...]
}

然后，在您的页面上，您必须访问data 变量，该变量存储了所有查询的信息。

export const YourPage= ({ data }) => {
  const yourTitle = data.site.siteMetadata.title;
  return ...
}

问题是您直接访问尚未定义的siteMetadata，您的信息存储在props.data.site.siteMetadata中，将data解构为prop，它为您节省了一步。

【讨论】：

我已经编辑了如何访问查询数据的答案。