best way to create gallery component from remote pictures?

[dev-ton]

Hello everybody,

First of all, let me warn you, Im new to Gatsby and React. I am struggling to find anywhere clear information about building a gallery component, what I mean by that is a grid of thumbnails and then lightbox to see details.

So far I understood that array.map() is the way. Im trying to utilize with Contentful, however Im having no luck, Gatsby throws this error :

TypeError: Cannot read property 'map' of undefined

Is there any recommended way how to iterate through the query and get from there images for thumbnails and large ones for the lightbox? As for the lightbox, Im planning to use simple-react-lightbox.

GraphQL

Calling a multiple media field, which I inserted into blog post content model. Checked in GraphiQL and the query works.

query MyQuery {
  contentfulBlogPost {
    id
    gallery {
      fluid(maxWidth: 300, background: "#020202") {
        base64
        tracedSVG
        srcWebp
        srcSetWebp
      }
    }
  }
}

Gatsby

in the blog-post.js template file, I have following code:

import React from 'react'
import { graphql } from 'gatsby'
import { Helmet } from 'react-helmet'
import get from 'lodash/get'
import Img from 'gatsby-image'
import Layout from '../components/layout'

import heroStyles from '../components/hero.module.css'

class BlogPostTemplate extends React.Component {
  render() {
    const post = get(this.props, 'data.contentfulBlogPost')
    const siteTitle = get(this.props, 'data.site.siteMetadata.title')
    const images = get(this.props, 'data.contentfulBlogPost.post.gallery')

    return (
      <Layout location={this.props.location}>
        <div style={{ background: '#fff' }}>
          <Helmet title={`${post.title} | ${siteTitle}`} />
          <div className={heroStyles.hero}>
            <Img
              className={heroStyles.heroImage}
              alt={post.title}
              fluid={post.heroImage.fluid}
            />
          </div>
          <div className="wrapper">
            <h1 className="section-headline">{post.title}</h1>
            <p
              style={{
                display: 'block',
              }}
            >
              {post.publishDate}
            </p>
            <div
              dangerouslySetInnerHTML={{
                __html: post.body.childMarkdownRemark.html,
              }}
            />
          </div>
          <div>

            {images.map(image => (
              <Img
                key={image.post.gallery.fluid.src}
                alt={image.post.title}
                fluid={image.post.gallery.fluid}
                style={{ margin: '3rem 0' }}
              />
            ))}
            
          </div>
        </div>
      </Layout>
    )
  }
}

export default BlogPostTemplate

export const pageQuery = graphql`
  ...

Thank you in advance for your help.

[dev-ton]

Solved