How to set a value on a specific page template in Gatsby

Question

New to Gatsby and can't get past this issue. I created a new page and on that page I want to change a value that is used in template file for the logo. On page 'my-mobile-app.js' I need to use the 'pulse' logo. Ive added it to the export default below but how do I call it from the specific page? Adding dark={true} to the <Img> changes it globally as expected. Let me know if this isn't clear.

This is the page structure:

• my-mobiel-app.js (new page that needs to have a different logo than all others)

  • import Layout from '../../components/layout'

• src/components/layout.js

  • import Header from "./Header"

• src/components/Header/Header.js

  • import Logo from '../Logo'

• And finally src/components/Logo.js has this code:

    export default ({ white, dark, pulse, ...props }) => {
        const logo = useStaticQuery(graphql`
            query {
                white: file(relativePath: { eq: "logo/Logo-whitebg.png" }) {
                    childImageSharp {
                        fluid {
                            ...GatsbyImageSharpFluid_noBase64
                        }
                    }
                }
                dark: file(relativePath: { eq: "logo/Logo-darkbg.png" }) {
                    childImageSharp {
                        fluid {
                            ...GatsbyImageSharpFluid_noBase64
                        }
                    }
                }
                pulse: file(relativePath: { eq: "logo/Logo-pulse.svg" }) {
                    childImageSharp {
                        fluid {
                            ...GatsbyImageSharpFluid_noBase64
                        }
                    }
                }
            }
        `)
    }
    const typeLogo = (white && 'white') || (dark && 'dark') || (pulse && 'pulse') || "white"
    return <Link to="/">
        <Img
            fluid={logo[typeLogo].childImageSharp.fluid}
            alt="Tradovate Logo"
            {...props}
            loading="eager"
            fadeIn={false}
        />
    </Link>
  

Answer 1

It's preferrable to export a named component (can be default) like:

 export default function Logo ({ white, dark, pulse, ...props }) => {
      const logo = useStaticQuery(graphql`
          query {
              white: file(relativePath: { eq: "logo/Logo-whitebg.png" }) {
                  childImageSharp {
                      fluid {
                          ...GatsbyImageSharpFluid_noBase64
                      }
                  }
              }
              dark: file(relativePath: { eq: "logo/Logo-darkbg.png" }) {
                  childImageSharp {
                      fluid {
                          ...GatsbyImageSharpFluid_noBase64
                      }
                  }
              }
              pulse: file(relativePath: { eq: "logo/Logo-pulse.svg" }) {
                  childImageSharp {
                      fluid {
                          ...GatsbyImageSharpFluid_noBase64
                      }
                  }
              }
          }
      `)
  }
  const typeLogo = (white && 'white') || (dark && 'dark') || (pulse && 'pulse') || "white"
  return <Link to="/">
      <Img
          fluid={logo[typeLogo].childImageSharp.fluid}
          alt="Tradovate Logo"
          {...props}
          loading="eager"
          fadeIn={false}
      />
  </Link>

Then wherever you want you just need to:

import Logo from '../path/to/your/brand/new/component'

<Logo white />

Change white or dark accordingly. I think it would be more clear if you create a boolean like isWhite or isDark and set it as default as true or false, whatever works for you like:

export default function Logo ({ isWhite=false, pulse, ...props }) => {}

In that way, you don't need to pass always a <Logo isWhite={false} /> because it's set as a default value to false. If you pass it like <Logo isWhite={true} /> will override the default configuration.