Mapping Gatsby gallery images with GraphQL

Question

I'm trying to figure out how to map gallery images into a lightbox component in Gatsby using graphql query. I think I need to set images = to the childimage sharp array but I'm not sure how to structure it, keep getting undefined errors. Any pointers would be massively appreciated. Let me know if any more info is required.

import React from "react"
import { graphql, Link } from "gatsby"
import Image from "gatsby-image"
import ImageGallery from 'react-image-gallery';

const ComponentName = ({ data }) => {
  const {id, galleryImage} = data.home
  console.log('data is', data)
  
  const images = [];

return (
    <Layout>
    <section className="template">
    <ImageGallery items={images} />;
    </section>
    </Layout>
    
)
}

export const query = graphql`
  query GetSingleHome($slug: String) {
    home: strapiHomes(slug: { eq: $slug }) {
    galleryImage {
      formats {
        large {
          childImageSharp {
            fluid {
              ...GatsbyImageSharpFluid
            }
            id
          }
        }
        small {
          childImageSharp {
            fluid {
              ...GatsbyImageSharpFluid
            }
            id
          }
        }
      }
    }
    MainImage {
      childImageSharp {
        fluid {
          ...GatsbyImageSharpFluid
        }
      }
    }
    }
  }
`

export default ComponentName

This is the gallery component in case it helps

Answer 1

According to the documentation, images prop should be an array of images, so applied to your use-case, images must be an array of object images.

Assuming that your query is working as expected and retrieving the proper data, you need to mount a valid array of objects to pass as images prop .

import React from "react"
import { graphql, Link } from "gatsby"
import Image from "gatsby-image"
import ImageGallery from 'react-image-gallery';

const ComponentName = ({ data }) => {
  const {id, galleryImage} = data.home
  console.log('data is', data)
  
  const images = [];

  galleryImage.forEach(image=>{
    let yourImageObject={};
  
    yourImageObject.original=image.formats.large.childImageSharp.fluid;
  
    images.push(yourImageObject);
  });
  

return (
    <Layout>
    <section className="template">
    <ImageGallery items={images} />;
    </section>
    </Layout>
    )
}

export const query = graphql`
  query GetSingleHome($slug: String) {
    home: strapiHomes(slug: { eq: $slug }) {
    galleryImage {
      formats {
        large {
          childImageSharp {
            fluid {
              ...GatsbyImageSharpFluid
            }
            id
          }
        }
        small {
          childImageSharp {
            fluid {
              ...GatsbyImageSharpFluid
            }
            id
          }
        }
      }
    }
    MainImage {
      childImageSharp {
        fluid {
          ...GatsbyImageSharpFluid
        }
      }
    }
    }
  }
`

export default ComponentName

You can simplify the code but I split to make it more readable and understandable. You need to loop through each image and create the mandatory data for the ImageGallery component: an array of objects with an original property inside with the ...GatsbyImageSharpFluid fragment inside.

If this package won't work with Gatsby image, you may need to change a little bit as well as the GraphQL query and the code to adapt it.

I don't know the needs of that dependency but you can also add the thumbnail property if needed using the same approach, adding:

    yourImageObject.thumbnail=image.formats.small.childImageSharp.fluid;