Upgrade trouble

[jkinley]

Hi There and thanks for this Repo. I want to upgrade to the latest but having issues. I had somehow managed to figure out how to get captions working so my use does not line up with your example here. Any ideas how I can fix this? Here is the old code that I was using:

import React from 'react'
import { useStaticQuery, graphql } from 'gatsby'
import Gallery from '@browniebroke/gatsby-image-gallery'
import styled from 'styled-components';
import '@browniebroke/gatsby-image-gallery/dist/style.css'

const Gallery2 = () => {
  const {gallery} = useStaticQuery(getGallery);
  const images = gallery.edges.map(({node}) => {
    return  (
      {
        ...node.src.childImageSharp,
        caption: <p className="text-xl">{node.caption}</p>
      }
    )
  })
  return (
    <GalleryWrap>
        <div className="container mx-auto px-8 lg:px-24 xl:px-48">
            <Gallery images={images} title="How about that?" />
        </div>
    </GalleryWrap>
  )
}

const GalleryWrap = styled.section`
	padding: 3rem 0;
`

const getGallery = graphql`
 {
  gallery: allGallery2Json {
    edges {
      node {
        caption
        src {
          childImageSharp {
            thumb: fluid(maxWidth: 300, maxHeight: 300) {
                ...GatsbyImageSharpFluid
            }
            full: fluid(maxWidth: 1024) {
                ...GatsbyImageSharpFluid
            }
          }
        }
      }
    }
  }
}
`

export default Gallery2

[jkinley]

Ok. So I managed to get it working again after a little refactoring. Hope this helps other people too. Please feel free to make any suggestions that you might have. Thanks!

import React from 'react';
import { useStaticQuery, graphql } from 'gatsby';
import Gallery from '@browniebroke/gatsby-image-gallery';

const Gallery1 = () => {
  const {gallery} = useStaticQuery(getGallery);
  const images = gallery.edges.map(({node}) => ({
    ...node.src.childImageSharp,
    caption: <p className="text-xl">{node.caption}</p>
  }));

  return (
    <section className="py-16">
      <div className="container mx-auto px-8 lg:px-24 xl:px-48">
          <Gallery images={images} title="Gallery 1" />
      </div>
    </section>
  );
};

const getGallery = graphql`
query test {
  gallery:allGallery1Json {
    edges {
      node {
        caption
        src {
          childImageSharp {
            thumb: gatsbyImageData(
              width: 270
              height: 270
              placeholder: BLURRED
            )
            full: gatsbyImageData(layout: FULL_WIDTH)
            }
          }
        }
      }
    }
  }
`

export default Gallery1

[browniebroke]

Hey, sorry for the long delay. I don't have anything to add, looks good to me. I just tweaked your snippets to add syntax highlighting.