Gatsby

Question

我一直在尝试从远程 URL 获取图像到 Gatsby 源文件系统，以利用 gatsby-image 插件的延迟加载。我有一个 restful API 其中 returns json 和一个包含图像 url 的字符串。我关注了 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);
    });
  });
}

Gatsby - 使用 createRemoteFileNode 获取远程图像

Gatsby - fetching remote images with createRemoteFileNode

graphql