graphql - Gatsby - 使用 createRemoteFileNode 获取远程图像

Question

我一直在尝试从远程 URL 获取图像到 Gatsby 源文件系统，以利用 gatsby-image 延迟加载的优势。插入。我有一个 Restful API，它返回带有包含图像 url 的字符串的 json。我关注了 this guide因为我对 Gatsby Node Api 很陌生，不知道如何解决这个问题。一切都运行良好，直到使用 createNodeField 向图像添加其他属性为止。 .似乎添加了属性(当我将 fileNode 记录到控制台时，我可以看到具有 fields 属性的对象。但是，在尝试查询图像时，出现错误:

我想知道我的代码是否有问题，还是因为 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 将事情搞砸了。在 for of 循环中做所有事情，解决了问题，尽管 eslint 对此提示很多。这是代码:

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