Гэтсби - выборка удаленных изображений с помощью createRemoteFileNode

Question

Я пытался извлечь изображения с удаленного URL-адреса в файловую систему Gatsby Source File, чтобы воспользоваться возможностью отложенной загрузки с помощью плагина gatsby-image.У меня есть API restful, который возвращает JSON со строкой, содержащей URL-адрес изображения.Я следовал этому руководству , так как я довольно новичок в Gatsby Node Api и не знал, как с этим справиться.Все работало хорошо до момента добавления дополнительных свойств к изображению с createNodeField.Кажется, что свойства добавлены (я вижу объект со свойством fields, когда регистрирую fileNode на консоли. Однако при попытке запроса изображений я получаю сообщение об ошибке:

Мне интересно, есть ли что-то не так в моем коде или это из-за изменений в gatsby? Я использую версию gatsby 2.0.2. Есть ли лучший вариант, чтобы как-то добавитьдополнительные свойства к изображению, чтобы иметь возможность запрашивать только нужные?

Вот как выглядит мой gatsby.node.js:

const axios = require('axios');
const { createRemoteFileNode } = require(`gatsby-source-filesystem`);

exports.sourceNodes = ({ actions, createNodeId, node, store, cache } => {
  const { createNode, createNodeField } = actions;
  const processProject = project => {
    project.photos.forEach(async photo => {
      let fileNode;

      try {
        fileNode = await createRemoteFileNode({
          url: photo.photo.url,
          store,
          cache,
          createNode,
          createNodeId: id => `projectPhoto-${photo.id}`,
        });

        await createNodeField({
          node: fileNode,
          name: 'ProjectPhoto',
          value: 'true',
        });

        await createNodeField({
          node: fileNode,
          name: 'created_at',
          value: photo.created_at,
        });
      } catch (error) {
        console.warn('error creating node', error);
      }
    });
  }

  return axios.get(baseApiUrl).then(res => {
  res.data.forEach(project => {
     const nodeData = processProject(project);
     createNode(nodeData);
    });
  });
}

Answer 1

В конце концов, кажется, что использование .forEach с async / await по какой-то причине испортило ситуацию.Делая все за цикл, исправил проблему, хотя Эслинт много на это жаловался.Вот код:

const axios = require('axios');
const { createRemoteFileNode } = require(`gatsby-source-filesystem`);

exports.sourceNodes = ({ actions, createNodeId, node, store, cache } => {
  const { createNode, createNodeField } = actions;
  const processProject = project => {
    for (const photo of project.photos) {
      let fileNode;

      try {
        fileNode = await createRemoteFileNode({
          url: photo.photo.url,
          store,
          cache,
          createNode,
          createNodeId: id => `projectPhoto-${photo.id}`,
        });

        await createNodeField({
          node: fileNode,
          name: 'ProjectPhoto',
          value: 'true',
        });

        await createNodeField({
          node: fileNode,
          name: 'created_at',
          value: photo.created_at,
        });
      } catch (error) {
        console.warn('error creating node', error);
      }
    }
  }

  return axios.get(baseApiUrl).then(res => {
  res.data.forEach(project => {
     const nodeData = processProject(project);
     createNode(nodeData);
    });
  });
}