...GatsbySanityImageFluid - Cannot read property 'fluid' of null

Question

I'm working with Sanity and Gatsby

I'm trying to map over an array of images to display them in an image gallery. My GraphQL query is working, I am able to display a single image but I receive the error: TypeError: Cannot read property 'fluid' of null When I attempt to map over the array.

Any direction is greatly appreciated!

My Query:

{
  sanityGallery {
    images {
      asset {
        fluid {
          ...GatsbySanityImageFluid
        }
      }
    }
  }
}

This Works:

const images = data.sanityGallery.images
<Img className="grow" fluid={images[0].asset.fluid} />

This Does not:

const images = data.sanityGallery.images

<div className="img-container">
  {images.map((image, index) => {
    console.log(image.asset.fluid); // <-- when adding this it logs the info in the screenshot below
    return (
      <div className="box">
        <Img className="grow" fluid={image.asset.fluid} key={index} />
      </div>
    )
  })}
</div>

Answer 1

Try something like:

const images = data.sanityGallery.images

<div className="img-container">
  {images.map((image, index) => {
    console.log(image.asset); // 
    return (
      <div className="box">
        {image.asset && <Img className="grow" fluid={image.asset.srcSet} key={index} />}
      </div>
    )
  })}
</div>