query for image in layout component

layout.js

import React from 'react'
import { Link } from 'gatsby'

import { rhythm, scale } from '../utils/typography'

import { StaticQuery, graphql } from 'gatsby'

class Template extends React.Component {
  render() {
    const { location, children } = this.props
    const rootPath = `${__PATH_PREFIX__}/`
    let header

    if (location.pathname === rootPath) {
      header = (
        <h1
          style={{
            ...scale(1.5),
            marginBottom: rhythm(1.5),
            marginTop: 0,
          }}
        >
          <Link
            style={{
              boxShadow: 'none',
              textDecoration: 'none',
              color: 'inherit',
            }}
            to={'/'}
          >
            Gatsby Starter Blog
          </Link>
        </h1>
      )
    } else {
      header = (
        <h3
          style={{
            fontFamily: 'Montserrat, sans-serif',
            marginTop: 0,
            marginBottom: rhythm(-1),
          }}
        >
          <Link
            style={{
              boxShadow: 'none',
              textDecoration: 'none',
              color: 'inherit',
            }}
            to={'/'}
          >
            Gatsby Starter Blog
          </Link>
        </h3>
      )
    }
    return <StaticQuery query={graphql`
          query layoutQuery {
            allImageSharp {
              edges {
                node {
                  original {
                    src
                  }
                }
              }
            }
          }
        `} render={data => <>
            <div style={{ marginLeft: 'auto', marginRight: 'auto', maxWidth: rhythm(24), padding: `${rhythm(1.5)} ${rhythm(3 / 4)}` }}>
              <img src={data.allImageSharp.edges[0].node.original.src}/>
              {header}
              {children}
            </div>
          </>} />}

}


export default Template