Search code examples
reactjsgatsbygatsby-image

Gatsby GraphQL Variables In Component

I'm an iOS developer and I've been struggling for what seems like the longest time making my portfolio site from scratch. I've tried a bunch of different technologies and have finally settled on using Gatsby to create it.

So far things have been fairly straightforward but I can not figure out for the life of me how to get a component that looks like the picture below. I've gotten most of the layout design working, but I can't seem to use graphql to query the images I need in the component.

Desired Layout

enter image description here

I've found plenty of Gatsby example templates such as this one and this one that are similar. However the main difference is that each of these only have one image and they seem to be using Gatsby 2.0 instead of 3.0.

I can get one image using "useStaticQuery", however I need access to different images for each component. From my understanding this is not possible to do within a component, only on a page. I also can not pass the image path as a variable to StaticImage either.

export default function App(props) {
  const query = useStaticQuery(graphql`
    query AppSectionImages {
      icon: file(relativePath: { eq: "EzMaxRequest/AppIcon_180.png" }) {
        childImageSharp {
          gatsbyImageData(
            width: 200
            placeholder: BLURRED
            formats: [AUTO, WEBP, AVIF]
          )
        }
      }
    }
  `);
  const image = getImage(query.icon);
  const app = props.app;

  return (
    <div>
      <h1>{app.title}</h1>
      <GatsbyImage image={image} />
    </div>
  );

Result

enter image description here

Can anyone please explain to me how I can get the desired layout in a component?

Edit

Here is some relevant code of what I am doing.

This is my index.js home page.

export default function IndexPage({ data }) {
  const projects = data.apps.edges;
  return (
    <Layout>
      <SEO title="Home" />
      <HeroSection />
      <DescriptionSection />
      <div>
        {projects.map(({ node: project }) => (
          <AppSection app={project} />
        ))}
      </div>
      <FooterSection />
    </Layout>
  );
}

//export page query
export const query = graphql`
  query Apps {
    apps: allAppsJson(sort: { order: ASC, fields: order }) {
      edges {
        node {
          appLink
          title
          tagline
          moreLink
          order
          icon
        }
      }
    }
  }
`;

Here is the component.

export default function App(props) {
  const query = useStaticQuery(graphql`
    query AppSectionImages {
      icon: file(relativePath: { eq: "EzMaxRequest/AppIcon_180.png" }) {
        childImageSharp {
          gatsbyImageData(
            width: 200
            placeholder: BLURRED
            formats: [AUTO, WEBP, AVIF]
          )
        }
      }
    }
  `);
  const image = getImage(query.icon);
  const app = props.app;

  return (
    <div>
      <h1>{app.title}</h1>
      <GatsbyImage image={image} alt={app.title} />
    </div>
  );
}
Solution

  • You have a few options:

    1. Query for all of your image data in your page query and prop-drill the data to the component that uses it to display the image.
    2. Using Gatsby v3+, hardcode the image references for each component using the new StaticImage component.
    3. If you have a single component used multiple times with different content/images, but a static parent component with your content, you can leverage option #2 above but pass the image component down as a prop or children.