Layout = ({ children }) => {
  const data = useStaticQuery(graphql`
    query SiteTitleQuery {
      site {
        siteMetadata {
          title
        }
      }
    }
  `)

  return (
    <>
      <Header siteTitle={data.site.siteMetadata.title} />
      <div
        style={{
          margin: `0 auto`,
          maxWidth: 960,
          padding: `0px 1.0875rem 1.45rem`,
          paddingTop: 0,
        }}
      >
        <main>{children}</main>
        <footer>
          See the code on{` `}
          <a href="https://github.com/gatsbyjs/gatsby/tree/master/examples/data-fetching">
            GitHub
          </a>
        </footer>
      </div>
    </>
  )
}
Layout component that queries for data
with Gatsby's useStaticQuery component

See: https://www.gatsbyjs.com/docs/use-static-query/