GatsbyImage working when pulling data locally but not with Strapi and Gatsby

Question

I'm on the verge of quitting (again!!) but keeping at it..

Would really appreciate some help on this or my laptop may be thrown out the window soon!

I set up a project locally and am now linking it to content on Strapi. I'm able to add the text data from Strapi fine but what I'm really struggling with is the GatsbyImage data.

I'm getting this error:

Warning: Failed prop type: The prop image is marked as required in GatsbyImage, but its value is undefined.

and here's my code:

import React from "react";
import { SubTitle } from "../components/styles/Styles";
import { GatsbyImage, getImage } from "gatsby-plugin-image";
import { graphql, useStaticQuery } from "gatsby";
import { ImageLayout } from "../components/styles/GridLayout";

// featured products on home page

const query = graphql`
  {
    allStrapiNewArrivals {
      nodes {
        images {
          localFile {
            childImageSharp {
              gatsbyImageData(
                placeholder: BLURRED
                layout: CONSTRAINED
                height: 400
                width: 400
              )
            }
          }
        }
      }
    }
  }
`;

const FeatureProducts = () => {
  const data = useStaticQuery(query);
  const nodes = data.allStrapiNewArrivals.nodes;
  console.log(nodes);
  return (
    <div>
      <SubTitle>New Arrivals</SubTitle>
      <ImageLayout>
        <div>
          <div className="collection-cards">
            {nodes.map((image, index) => {
              const pathToImage = getImage(image);
              return (
                <GatsbyImage
                  image={pathToImage}
                  alt=""
                  key={index}
                  className="collection"
                />
              );
            })}
          </div>
        </div>
      </ImageLayout>
    </div>
  );
};

export default FeatureProducts;

When I console.log(nodes) it returns:

[{…}]
0:
images: Array(3)
0: {localFile: {…}}
1: {localFile: {…}}
2: {localFile: {…}}
length: 3
__proto__: Array(0)
__proto__: Object
length: 1
__proto__: Array(0)

My thoughts - in the allStrapiNewArrivals data, could the 'images{ localFile ' bit be the cause? because these aren't listed when pulling the data locally. eg. should it read: 'file{childImageSharp'

I've tried using 'const nodes = data.allStrapiNewArrivals.nodes.images.localFile' but this is also throwing an error of:

Cannot read property 'map' of undefined

or could it be the getImage() in the .map function? - const pathToImage = getImage(image);

If anyone can help I'd be so grateful, I've been stuck on this for ages!

Answer 1

images is an array of images so you would have to map over it too. Also try gatsby clean

nodes.map((node, index) => {
  return node.images.map(image => {
    const pathToImage = getImage(image.localFile);
    return ( <
      GatsbyImage image = {
        pathToImage
      }
      alt = ""
      key = {
        index
      }
      className = "collection" /
      >
    );
  })
})