How can I map out multiple images in Gatsby with GraphiQl?

Question

I would like to query multiple images from a specific folder on a webpage via GraphiQl.

I've tried it multiple ways, but I'm not able to display the images. I can however get 1 image to show (without mapping), but not multiple.

I can also display the id or base of the image on the webpage, to show a list of all of them. But if I try it with the actual images I get the following error message in the console:

Warning: Failed prop type: The prop `alt` is marked as required in `J`, but its value is `undefined`.
    at J (webpack-internal:///./node_modules/gatsby-plugin-image/dist/index.browser-4e524ce6.js:615:13)
    at eval (webpack-internal:///./node_modules/gatsby-plugin-image/dist/index.browser-4e524ce6.js:635:13)
    at MainImage
    at G (webpack-internal:///./node_modules/gatsby-plugin-image/dist/index.browser-4e524ce6.js:608:13)

The page however is showing correctly, but without the images. Is there something going wrong in my code?

import * as React from "react"
import {graphql} from "gatsby"
import { GatsbyImage, getImage } from "gatsby-plugin-image"
import Layout from "../../components/layout"

const JewelryPage = ({ data }) => {
  const image = getImage(data.allFile.childrenImageSharp)
  return (
    <Layout pageTitle="Jewelry">
        <h1>Jewelry</h1>
      {data.allFile.edges.map(image => (
         <GatsbyImage image={image} />
      ))}
    </Layout>
  )
}

export default JewelryPage

export const query = graphql `
query {
   allFile(filter: {relativeDirectory: {eq: "content/portfolio/jewelry"}}) {
    edges {
      node {
        childrenImageSharp {
          gatsbyImageData(
            width: 800
            placeholder: DOMINANT_COLOR
            formats: [AUTO, WEBP, AVIF]
          )
        }
        base
        id
      }
    }
  }
}
`

My gatsby-config looks like this

module.exports = {
  siteMetadata: {
    title: ``,
    siteUrl: ``
  },
  plugins: [{
    resolve: 'gatsby-plugin-google-analytics',
    options: {
      "trackingId": ""
    }
  }, "gatsby-plugin-image", "gatsby-plugin-react-helmet", "gatsby-plugin-sitemap", {
    resolve: 'gatsby-plugin-manifest',
    options: {
      "icon": `${__dirname}/src/images/icon.png`
    }
  }, "gatsby-plugin-mdx", "gatsby-plugin-sharp", "gatsby-transformer-sharp",
  {
    resolve: 'gatsby-source-filesystem',
    options: {
      "name": "images",
      "path": `${__dirname}/src/images/`
    }
  },
  {
    resolve: 'gatsby-source-filesystem',
    options: {
      "name": "pages",
      "path": `${__dirname}/src/pages/`
    }
  },
  {
    resolve: 'gatsby-source-filesystem',
    options: {
      "name": "jewelry",
      "path": `${__dirname}/src/images/content/portfolio/jewelry/`
    }
  },
  {
    resolve: `gatsby-plugin-google-fonts`,
    options: {
      fonts: [
        `Cormorant\:200,300,300i,400,500,600`,
        `Forum\:200,400,500,600`
      ],
      display: 'swap'
    }
  },
    "gatsby-plugin-netlify",
  ]
};

Answer 1

Try this:

const JewelryPage = ({ data }) => {
  return (
    <Layout pageTitle="Jewelry">
        <h1>Jewelry</h1>
      {data.allFile.edges.node.map(image => {
       console.log("image", image);
       return <GatsbyImage image={image?.childrenImageSharp?.gatsbyImageData} alt="some alt text"/>
      })}
    </Layout>
  )
}

image in your loop, stands for node, so in order to provide to GatsbyImage the correct data you must access each specific position of childrenImageSharp and gatsbyImageData.

In addition, as the error prompts, alt attribute is required as a property of GatsbyImage, you must provide it for each image.