Gatsby Js - сделать ImageSharp из нескольких изображений, на которые есть ссылки в csv

Question

Используя gatsby-transformer-csv amd gatsby-transformer-sharp

с учетом CSV-файла с одной ячейкой, на которую ссылаются несколько изображений (с локальным путем), как я могу заставить их обрабатываться imageSharp?

id,slug,images
615,prime-click-solid-2,./images/products/PC-019-S1.png, ./images/products/PC-019-S-1.png

Answer 1

Для того, чтобы это сработало, я думаю, вам придется здесь много делать вручную.

Во-первых, поскольку значения разделены запятой, вы должны сгруппировать изображения вместе:

id,slug,images
                         v                        v
615,prime-click-solid-2, "./img-1.png, ./img-2.png"

Затем вы можете использовать createSchemaCustomization перехват в gatsby-node для ...

1. перехватывает поле images
2. извлекает пути из исходного значения, ./img-1.png, ./img-2.png
3. создает правильный абсолютный путь для каждого вашего изображения
4. запросить эти изображения в базе данных Гэтсби
5. вернуть изображения

У меня немного простоя, поэтому я создал небольшой пример.

Структура каталогов:

<root>
  |--content
  |     |
  |     |--images
  |     |     |--img-1.png
  |     |     `--img-2.png
  |     |     
  |     `--data.csv
  |
  `--gatsby-node.js

data.csv content

id,images
hello,"./images/287.jpg, ./images/288.jpg"

Пользовательский крючок Гэтсби

// gatsby-node.js

const path = require('path')

exports.createSchemaCustomization = ({ actions, schema }) => {
  const { createTypes } = actions

  const types = schema.buildObjectType({
    name: 'DataCsv', // Gatsby create name based on your csv file name. Yours will be different — you can find your CSV type name in localhost:8000/___graphql
    interfaces: ['Node'],
    extensions: {
      infer: true,
    },
    fields: {
      images: {
        type: '[File]', // important. We're saying DataCsv.images will return an array of File, instead of a string as inferred by default.
        resolve: (src, args, context, info) => {
          const { fieldName } = info
          const paths = src[fieldName]
          const imagePaths = paths.split(',').map(str => str.trim())

          const absolutePaths = imagePaths.map(imagePath => {
            return path.join(__dirname, 'content', imagePath)
          })

          const fileNodes = context.nodeModel.runQuery({
            type: 'File',
            query: {
              filter: {
                absolutePath: {
                  in: absolutePaths
                }
              }
            }
          })

          return fileNodes
        }
      }
    }
  })

  createTypes(types)
}

Затем вы можете запросить изображения:

  query Images {
    dataCsv {
      images {
        childImageSharp {
          original {
            src
          }
        }
      }
    }
  }

Вы можете увидеть пример и адаптировать его по мере необходимости здесь: https://github.com/d4rekanguok/gatsby-csv-multi-images-example

Ресурсы

Подробнее об этом хуке вы можете узнать в официальных документах , но это немного dry.

Я также написал учебник на топи c здесь .

Надеюсь, что это полезно!

Answer 2

Похоже, что то, что вы пытаетесь сделать здесь, можно разбить на два этапа:

• Разобрать CSV в массив узлов, каждый из которых содержит массив URL-адреса изображений.

• Перебор этих узлов во время сборки и преобразование каждого URL-адреса в массиве URL каждого узла в imageSharp узел.

---

Один из способов подойти к этому ^* заключается в следующем:

• Настройте gatsby-transformer-csv в вашем gatsby-config, чтобы получить В CSV-узлах настраиваемое имя.

• Переопределить onCreateNode в gatsby-node, добавьте условие для запуска при создании узлов CSV, извлеките массив URL-адресов изображений из узла и итерируйте их, чтобы создать imageSharp узлы из файловой системы.

В качестве альтернативы, вы можете обойтись без второго шага, если вы просто проанализируете пути к изображениям, а затем передадите те в file запрос GraphQL с file(relativePath: $path) { childImageSharp { /* ... */ } или подобным, как указано здесь , например. Имейте в виду, что динамические c запросы в Gatsby могут использоваться только в компонентах "page" верхнего уровня, тогда как stati c запросы могут использоваться где угодно.

^* Может быть лучше! Как уже упоминалось выше, трудно сказать, что является «лучшим» решением, не зная больше о вашем сценарии использования. Гэтсби очень гибок в управлении вашими данными.