gatsby- node.js - Добавить несколько изображений под один родительский объект - PullRequest
Новая
       93

gatsby- node.js - Добавить несколько изображений под один родительский объект

1 голос
/ 03 августа 2020

Я пытаюсь добавить несколько изображений на родительский объект, но застреваю при попытке вставить узел с несколькими изображениями в graphql через gatsby- node.js. В graphql данные изображения проходят, но ему не назначена функция childImageSharp. Мои данные JSON могут иметь до 4 изображений для каждого родительского элемента, поэтому мы стараемся быть гибкими с этим, а не добавлять фиксированные объекты image1, image2, image3, image4. Мне нужен объект родительских изображений, который содержит дочерние изображения, независимо от того, есть ли изображение 1 или до 4. Если это возможно?

Я создал массив, содержащий дочерние изображения для каждой родительской ссылки и добавил это в функцию createNode, задавшись вопросом, не того ли тип массива? Я пробовал добавить его как объект.

это мой gatsby- node.js файл 

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

Вот образец объекта из источника JSON файл: 

{
    "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"
      }
    ]
  }
...