title: Set a different hero image on main layout according to the post/url (retrieving the data from graphQL) [GATSBY]
body: <p><strong>EDIT</strong>: There is a demo on this <a href="https://github.com/anonimoconiglio/gatsby-for-debugging" rel="nofollow noreferrer">Github repository</a>.</p>
  
  <p>I need to change the main layout hero-image of my blog according to the post/page (its slug).<br>
  Every post has a hero-image, setted in the frontmatter info. </p>
  
  <p>I tried everything but:<br>
  1. either it shows only the same image (of my last post) - this happens if I recall <code>markdownRemark</code> without iterate.<br>
  2. Or it tells me that I need a key props (that I already set) after iterate with <code>allMarkdownRemark</code>.</p>
  
  <p>This is my last attempt.
  I grabbed the data via GraphQl and then setted a condition (if it's the homepage it shows my main hero-image, otherwise it should show the image that is located in frontmatter  info of the single post):</p>
  
  <pre><code>[...]
  {location.pathname === '/' 
    ? (&lt;Img fluid={data.file.childImageSharp.fluid} /&gt;) 
    : (({allMarkdownRemark}) =&gt; ( 
      allMarkdownRemark.edges.map(({node}) =&gt; ( 
        &lt;Img 
          key={node.frontmatter.slug}
          fluid={node.frontmatter.hero.childImageSharp.fluid} /&gt; 
      )
    ))
  )}
  [...]
  </code></pre>
  
  <p>This is the entire layout component: </p>
  
  <pre><code>import React from "react";
  import PropTypes from "prop-types";
  import Helmet from "react-helmet";
  import { Spring } from 'react-spring/renderprops';
  import styled from "styled-components";
  import { StaticQuery, graphql } from "gatsby";
  import Img from 'gatsby-image';
  
  
  import Header from "./header";
  import Archive from "./archive";
  import "./layout.css";
  
  const MainLayout = styled.main`...`;
  
  const Layout = ({ children, location }) =&gt; (
  &lt;StaticQuery
    query={graphql`
      query SiteTitleQuery {
        site {
          siteMetadata {
            title
            description
          }
        }
        file(relativePath: {regex: "/my-main-img/"}) {
          childImageSharp {
            fluid (maxWidth: 1900, quality: 90) {
              ...GatsbyImageSharpFluid_tracedSVG
            } 
          }
        }
        allMarkdownRemark {
          edges {
            node {
              frontmatter {
                slug
                hero {
                  childImageSharp{
                    fluid(maxWidth: 800, quality: 100) {
                      ...GatsbyImageSharpFluid
                    }
                  }
                }
              }
            }
          }
        }
        markdownRemark {
          frontmatter {
            hero {
              childImageSharp {
                fluid (maxWidth: 1900, quality: 90) {
                  ...GatsbyImageSharpFluid_tracedSVG
                }
              }
            }
          }
        } 
      }
    `}
    render={data =&gt; (
      &lt;&gt;
        &lt;Helmet [...]&gt;
        [...]
        &lt;/Helmet&gt;
        &lt;Header siteTitle={data.site.siteMetadata.title} /&gt;
        &lt;Spring 
          from={{ height: location.pathname === '/' ? 150 : 500 }} 
          to={{ height: location.pathname === '/' ? 500 : 150 }}&gt;
          {({ height }) =&gt; 
            &lt;div style={{ overflow: 'hidden', height }}&gt;
              {location.pathname === '/'
                ? (&lt;Img fluid={data.file.childImageSharp.fluid} /&gt;)
                : (({allMarkdownRemark}) =&gt; ( 
                      allMarkdownRemark.edges.map(({node}) =&gt; 
                        (&lt;Img
                          key={node.frontmatter.slug}
                          fluid={node.frontmatter.hero.childImageSharp.fluid}/&gt;)
                      )
                  ))
              }
            &lt;/div&gt;
          }
        &lt;/Spring&gt;
        &lt;MainLayout&gt;
          &lt;div&gt;{children}&lt;/div&gt;
          &lt;Archive /&gt;
        &lt;/MainLayout&gt;
      &lt;/&gt;
      )}
    /&gt;
  );
  
  Layout.propTypes = {
  children: PropTypes.node.isRequired
  };
  
  export default Layout;
  </code></pre>
  
  <p>I followed every guide but still don't get what's missing. I'm new to react and not so expert in javascript, sorry if this is a noob question.</p>
  
  <p>Thanks in advance for any help.</p>