Importing and displaying multiple images from GraphQL using gatsby-plugin-image


Hi I’m trying to add an instagram feed to my website but I can not find a way to make it work. I haven’t really used these tools before so I don’t really understand it, but made it to point where I think I have the feed in GraphQL. Now the problem is I don’t know how to display the images. Can anyone help?

Here is some code:

import React from "react"
import { GatsbyImage, getImage } from "gatsby-plugin-image"
import { useStaticQuery, graphql } from "gatsby"


const CapabilityList = () => {
  const data = useStaticQuery(graphql`
  query InstagramQuery {
    allInstagramContent {
      edges {
        node {
          localImage {
            
            childImageSharp {
              fixed(width: 200, height: 200) {
                ...GatsbyImageSharpFixed
              }
          }
        }
      }
    }
  }
}
`)
  let arrayOfInstaImages = getImage(data, 'allInstagramContent.edges')

  return (
      <div style={{ maxWidth: `900px`, marginBottom: `1.45rem`, display: 'flex' }}>
        {arrayOfInstaImages.map((item, i) => {
          return (
            <div key={i} style={{ width: "200px", height: "200px" }}>
              <GatsbyImage image={item.node.localImage.childImageSharp.fixed} />
            </div>)
        })}
      </div>

  )
}

export default CapabilityList;

This doesn’t work and displays error: Property ‘map’ does not exist on type ‘IGatsbyImageData’.
So I think I need some other way to display a few images from the array.

Thanks a lot for every help!

Source: React – Stack Overflow

November 21, 2021
Category : News
Tags: gatsby | gatsby-image | graphql | javascript | reactjs

Leave a Reply

Your email address will not be published. Required fields are marked *

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.