Issue with GraphQL Site and siteMetadate query

Question

I'm debugging some code that cannot figure out so I have been stuck on for past 2 weeks.

My code is telling me that I have:

1. Cannot query field "siteMetadate" on type "Site". Did you mean "siteMetadata"?

I have want on GraphiQL Database to redo but still don't see social or twitter under the site explorer. What tips or suggests might you can give that can help move forward to learning on to debugged the issue.

There was an error in your GraphQL query:

Cannot query field "siteMetadate" on type "Site".

If you don't expect "siteMetadate" to exist on the type "Site" it is most likely a typo. However, if you expect "siteMetadate" to exist there are a couple of solutions to common problems:

• If you added a new data source and/or changed something inside gatsby-node.js/gatsby-config.js, please try a restart of your development server
• The field might be accessible in another subfield, please try your query in GraphiQL and use the GraphiQL explorer to see which fields you can query and what shape they have
• You want to optionally use your field "siteMetadate" and right now it is not used anywhere. Therefore Gatsby can't infer the type and add it to the GraphQL schema. A quick fix is to add at least one entry with that field ("dummy content")

import { graphql, useStaticQuery } from "gatsby"
import * as React from "react"
import PropTypes from "prop-types"
import { Helmet } from "react-helmet"

const Seo = ({ description, lang, meta, title }) => {

  const { site } = useStaticQuery(
    graphql`
      query {
        site {
          siteMetadate {
            description
            title
            social {
              twitter
            }
          }
        }
      }
    `
  )
  // const { site } = useStaticQuery(
  //   graphql`
  //     query {
  //       site {
  //         siteMetadata {
  //           title
  //           description
  //           social {
  //             twitter
  //           }
  //         }
  //       }
  //     }
  //   `
  // )

  

  const metaDescription = description || site.siteMetadata.description
  const defaultTitle = site.siteMetadata.title

  return (
    <Helmet
      htmlAttributes={{
        lang,
      }}
      title={title}
      titleTemplate={defaultTitle ? `%s | ${defaultTitle}` : null}
      meta={[
        {
          name: `description`,
          content: metaDescription,
        },
        {
          property: `og:title`,
          content: title,
        },
        {
          property: `og:description`,
          content: metaDescription,
        },
        {
          property: `og:type`,
          content: `website`,
        },
        {
          name: `twitter:card`,
          content: `summary`,
        },
        {
          name: `twitter:creator`,
          content: site.siteMetadata.social.twitter || ``,
        },
        {
          name: `twitter:title`,
          content: title,
        },
        {import { graphql, useStaticQuery } from "gatsby"
import * as React from "react"
import PropTypes from "prop-types"
import { Helmet } from "react-helmet"

const Seo = ({ description, lang, meta, title }) => {

  const { site } = useStaticQuery(
    graphql`
      query {
        site {
          siteMetadate {
            description
            title
            social {
              twitter
            }
          }
        }
      }
    `
  )
  // const { site } = useStaticQuery(
  //   graphql`
  //     query {
  //       site {
  //         siteMetadata {
  //           title
  //           description
  //           social {
  //             twitter
  //           }
  //         }
  //       }
  //     }
  //   `
  // )

  

  const metaDescription = description || site.siteMetadata.description
  const defaultTitle = site.siteMetadata.title

  return (
    <Helmet
      htmlAttributes={{
        lang,
      }}
      title={title}
      titleTemplate={defaultTitle ? `%s | ${defaultTitle}` : null}
      meta={[
        {
          name: `description`,
          content: metaDescription,
        },
        {
          property: `og:title`,
          content: title,
        },
        {
          property: `og:description`,
          content: metaDescription,
        },
        {
          property: `og:type`,
          content: `website`,
        },
        {
          name: `twitter:card`,
          content: `summary`,
        },
        {
          name: `twitter:creator`,
          content: site.siteMetadata.social.twitter || ``,
        },
        {
          name: `twitter:title`,
          content: title,
        },
        {
          name: `twitter:description`,
          content: metaDescription,
        },
      ].concat(meta)}
    />
  )
}

Seo.defaultProps = {
  lang: `en`,
  meta: [],
  description: ``,
}

Seo.propTypes = {
  description: PropTypes.string,
  lang: PropTypes.string,
  meta: PropTypes.arrayOf(PropTypes.object),
  title: PropTypes.string.isRequired,
}

export default Seo
          name: `twitter:description`,
          content: metaDescription,
        },
      ].concat(meta)}
    />
  )
}

Seo.defaultProps = {
  lang: `en`,
  meta: [],
  description: ``,
}

Seo.propTypes = {
  description: PropTypes.string,
  lang: PropTypes.string,
  meta: PropTypes.arrayOf(PropTypes.object),
  title: PropTypes.string.isRequired,
}

export default Seo

Answer 1

siteMetadata (not siteMetadate, check the spelling) is an object defined in the gatsby-config.js:

module.exports = {
  siteMetadata: {
    title: `Gatsby`,
  },
  plugins: [
    `gatsby-transform-plugin`,
    {
      resolve: `gatsby-plugin-name`,
      options: {
        optionA: true,
        optionB: `Another option`,
      },
    },
  ],
}

In this case, siteMetadata will expose a title field so you can fetch it using the useStaticQuery hook.

I recommend you check the spelling of siteMetadata against siteMetadate, all names must match the original configuration:

module.exports = {
  siteMetadata: {
    title: `Gatsby`,
    siteUrl: `https://www.gatsbyjs.com`,
    description: `Blazing fast modern site generator for React`,
    social: {
      twitter: 'some twitter'
    }
  },
} 

Extend it to add your Twitter and other social data if needed.