I'm trying to add multiple images per parent object, however getting stuck when trying to insert the multiple images node into graphql via gatsby-node.js. In graphql the image data is coming through but it doesn't have the childImageSharp functionality assigned. My JSON data can have up to 4 images per parent item so trying to be flexible with that rather than adding fixed image1, image2, image3, image4 objects. I want a parent images object that holds the children images no matter if there is 1 image or up to 4. ASsuming that is possible?
I've created an array thats holds the child images per parent reference and have added that to the createNode function, wondering if the array is the wrong type? I've tried adding it as an object.
this is my gatsby-node.js file
const path = require('path');
const workItems = require('./data/data.json');
exports.sourceNodes = ({ actions, createNodeId, createContentDigest }) => {
workItems.forEach((workItem) => {
const {
section,
title,
markdown,
images,
} = workItem;
const imagesNodeArray = []
images.forEach((img) => {
const [id, imgPath] = Object.entries(img)[0]
const { name, ext } = path.parse(imgPath) // get file name & extension
const absolutePath = path.resolve(__dirname, imgPath)
const data = {
name,
ext,
absolutePath,
extension: ext.substring(1),
}
const imagesNode = {
...data,
id: createNodeId(`workItem-image-${id}`),
internal: {
type: 'workItemImage',
contentDigest: createContentDigest(data),
},
};
imagesNodeArray.push(imagesNode)
})
const node = {
section,
title,
markdown,
images: imagesNodeArray,
id: createNodeId(`item-${title}`),
internal: {
type: 'workItem',
contentDigest: createContentDigest(workItem),
},
};
actions.createNode(node);
});
};
Here is a sample object from source JSON file:
{
"id":"ID value",
"section":"ds",
"title":"title value",
"markdown":"content/value.md",
"images":[
{
"url":"src/images/image-file.png",
"alt":"descriptive text for image here"
},
{
"url":"src/images/image-file2.png",
"alt":"descriptive text for image here"
},
{
"url":"src/images/image-file3.png",
"alt":"descriptive text for image here"
}
]
}