reactjs - 投稿/URLに応じてメインレイアウトに異なるヒーロー画像を設定する（graphQLからデータを取得）[GATSBY]

Question

編集: このGithub リポジトリにデモがあります。

投稿/ページ (そのスラッグ) に従って、ブログのメイン レイアウトのヒーロー画像を変更する必要があります。
すべての投稿には、フロントマター情報に設定されたヒーロー画像があります。

私はすべてを試しましたが：
1.（最後の投稿の）同じ画像のみを表示します-これは、markdownRemark反復せずに思い出すと発生します。
2.または、で反復した後にキー小道具（すでに設定済み）が必要であることを教えてくれますallMarkdownRemark。

これが私の最後の試みです。GraphQl を介してデータを取得し、条件を設定しました (ホームページの場合はメインのヒーロー画像を表示し、それ以外の場合は、単一の投稿のフロントマター情報にある画像を表示する必要があります)。

[...]
{location.pathname === '/' 
  ? (<Img fluid={data.file.childImageSharp.fluid} />) 
  : (({allMarkdownRemark}) => ( 
    allMarkdownRemark.edges.map(({node}) => ( 
      <Img 
        key={node.frontmatter.slug}
        fluid={node.frontmatter.hero.childImageSharp.fluid} /> 
    )
  ))
)}
[...]

これはレイアウト コンポーネント全体です。

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 }) => (
<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 => (
    <>
      <Helmet [...]>
      [...]
      </Helmet>
      <Header siteTitle={data.site.siteMetadata.title} />
      <Spring 
        from={{ height: location.pathname === '/' ? 150 : 500 }} 
        to={{ height: location.pathname === '/' ? 500 : 150 }}>
        {({ height }) => 
          <div style={{ overflow: 'hidden', height }}>
            {location.pathname === '/'
              ? (<Img fluid={data.file.childImageSharp.fluid} />)
              : (({allMarkdownRemark}) => ( 
                    allMarkdownRemark.edges.map(({node}) => 
                      (<Img
                        key={node.frontmatter.slug}
                        fluid={node.frontmatter.hero.childImageSharp.fluid}/>)
                    )
                ))
            }
          </div>
        }
      </Spring>
      <MainLayout>
        <div>{children}</div>
        <Archive />
      </MainLayout>
    </>
    )}
  />
);

Layout.propTypes = {
children: PropTypes.node.isRequired
};

export default Layout;

私はすべてのガイドに従いましたが、まだ不足しているものを取得できません。私は反応するのが初めてで、JavaScriptの専門家ではありません。これが初心者の質問である場合は申し訳ありません.

助けてくれてありがとう。