无法将远程文件节点添加到父节点 Gatsby

Posted 2023-03-08

【中文标题】无法将远程文件节点添加到父节点 Gatsby

【英文标题】：Unable to add remote file node to parent node Gatsby

【发布时间】：2020-12-18 06:00:07

【问题描述】：

我正在尝试将 File 节点添加到不会自动创建它们的 gatsby 源（在本例中为gatsby-source-tumblr）。每个节点都有一个关联的图像数组，我想下载这些图像，然后使用 Gatsby-Image 进行转换。

到目前为止，这是我的代码：

exports.onCreateNode = async (
  node,
  actions:  createNode, createNodeField ,
  store,
  cache,
  getCache,
  createNodeId,
) => 
  if (node.internal.type === `TumblrPost`) 
    const pathValue = "/posts/" + node.slug
    createNodeField(
      node,
      name: `path`,
      value: pathValue,
    )
  

  if (
    node.internal.type === `TumblrPost` &&
    node.photos &&
    node.photos.length
  ) 
    await node.photos.map(async photo => 
      let fileNode
      try 
        fileNode = await createRemoteFileNode(
          url: photo.original_size.url,
          parentNodeId: node.id,
          getCache,
          createNode,
          cache,
          createNodeId,
          store,
        )
        // Adds a field `localFile` to the node
        // ___NODE appendix tells Gatsby that this field will link to another node
        if (fileNode) 
          photo.localFile___NODE = fileNode.id
        
       catch (err) 
        console.warn(err)
      
    )
  

正如我在多个教程中所建议的那样，我使用createRemoteFileNode 来下载图像并将它们添加为文件节点。 这部分有效，我可以看到正在下载的图像，并且在 GraphiQL 中的 allImageSharp 类别下可以看到许多项目。

但是我似乎无法让与父节点的关联起作用。做类似photo.localFile___NODE = fileNode.id 的事情似乎没有任何效果。尝试将一张图像添加到父节点（帖子）似乎不起作用：在 GraphiQL 检查器中查看帖子节点时，没有文件节点的痕迹。

我感觉我可能遗漏了一些明显的东西，但我已经摆弄了几个小时，似乎无法弄清楚。

任何帮助将不胜感激！

【问题讨论】：

会不会是fileNode 还没有id？在这个例子中alexluong.com/blog/gatsby-image-sharp-from-url 他们使用createNodeId 这样createNodeId: id => `dog-image-sharp-$id` 在使用createRemoteFileNode 时使用createRemoteFileNode

【参考方案1】：

我发现 this answer 帮助我修复了它。我认为问题在于我如何处理异步循环。我复制了它设置product.images 的代码（在那个其他用户的代码库中）并将其改编为我的，它工作。我猜 _await Promise.all_ 是关键。

这对我来说很奇怪，因为我引入了奇妙的 async 库（我比 await 等更熟悉的东西）以确保循环没有任何问题，并且那没有用。嗯，这就是生活。我很高兴它现在可以工作了。