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

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" /
>
);
})
})