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

Question

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

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}

Answer 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 ，它为您节省了一步。