[gatsby-plugin-image] Best practice for displaying image depending on the given prop.

[mwskwong]

So given I have various company logos.

• google.jpg
• faceboopk.jpg
• github.jpg
• ...etc

I would like to make a component that does something like:

<CompanyLogo variant="google" />

What is the best practice to incorporate this design with gatsby-plugin-image? I'm also open to alternative practice if what I'm thinking is not ideal.

Currently what I'm doing is to run a GraphQL static query in CompanyLogo to retrieve all company logos, then use JS function to find the one I want depending on the received prop.

const { images: { edges: images } } = useStaticQuery(graphql`
  query {
    images: allFile(filter: {
      sourceInstanceName: {eq: "images"}, 
      relativeDirectory: {eq: "companies"}
    }) {
      edges {
        node {
          relativePath
          childImageSharp {
            gatsbyImageData(
              layout: FIXED
              transformOptions: {grayscale: true}
              height: 100
            )
          }
        }
      }
    }
  }
`);

const { name, href, image: imagePath } = data.work.company[company] || {};
const imageData = images.find(({ node: { relativePath } }) => imagePath === relativePath);
const image = getImage(imageData.node);

I have very little knowledge of GraphQL. Will this have any impact on performance.

[mwskwong]

Related to #31326