Can’t read siteMetadata object from gatsby-config.js multiple queries GrahQL - Gatsby ReactJS

user_13734394 0
Viewed 381

I am trying to read the content of siteMetadata object I defined in gatsby-config.js file, from multiple queries at once using GraphQL. I have this error:

error  'siteMetadata' is not defined  no-undef

My JS file

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
        }
      }
  } 
`

and I call 

{siteMetadata.title}
graphql gatsby reactjs
1 Answers

In your gatsby-config.js you should have an object called siteMetadata within the same structure than you are querying:

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

Then, on your page, you have to access to data variable, which stores all the information queried.

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

The problem is that you are accessing directly to siteMetadata which is not defined yet, your information is stored inside props.data.site.siteMetadata, destructuring data as a prop, it saves you one step.

user_55853710
Related