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

Question

我正在尝试使用 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}

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