Typescript Issue using example from Docs

[ErikAGriffin]

Hi, I set up my repository to try the example from the docs:

import { graphql } from 'gatsby'
import React from 'react'

import Gallery from '@browniebroke/gatsby-image-gallery'

const MyPage = ({ data }) => {
  const images = data.allFile.edges.map(({ node }) => node.childImageSharp)
  // `images` is an array of objects with `thumb` and `full`
  return <Gallery images={images} />
}

export const pageQuery = graphql`
  query ImagesForGallery {
    allFile {
      edges {
        node {
          childImageSharp {
            thumb: gatsbyImageData(
              width: 270
              height: 270
              placeholder: BLURRED
            )
            full: gatsbyImageData(layout: FULL_WIDTH)
          }
        }
      }
    }
  }
`

export default MyPage

And I'm getting the following Typescript error on the line where images is passed into Gallery. It doesn't like that the images array may contain null values, because the images prop is expecting an array of only ImageProp, and the GraphQL query thinks that the nodes may be null. Any suggestions on how to fix this?

Type '({ readonly thumb: IGatsbyImageData; readonly full: IGatsbyImageData; } | null)[]' is not assignable to type 'ImageProp[]'.
  Type '{ readonly thumb: IGatsbyImageData; readonly full: IGatsbyImageData; } | null' is not assignable to type 'ImageProp'.
    Type 'null' is not assignable to type 'ImageProp'.

[ErikAGriffin]

Hmm I ended up having to create my own types file to export the ImageProp interface, and doing the following:

  const images: ImageProp[] = [];
  data.allFile.nodes.forEach(node => {
    if (node.childImageSharp) {
      images.push(node.childImageSharp);
    }
  });

It would be nice if Gallery exported its types, or if the images prop handled receiving potentially null values for childImageSharp data from GraphQL

[browniebroke]

Your suggestion makes sense, we should indeed export our types. Not sure if I'll have time to do it myself, but if you submit a pull request, I'll be more than happy to review it.