Graphql Gatsby-使用createRemoteFileNode获取远程映像

我一直在尝试从远程URL获取图像到Gatsby源文件系统，以利用

Gatsby image

插件的延迟加载。我有一个restful API，它返回json和一个包含图像url的字符串。因为我对盖茨比节点Api还不太熟悉，所以我不知道如何解决这个问题。在使用

createNodeField

向图像添加附加属性之前，一切都很顺利。属性似乎已添加（当我将fileNode登录到控制台时，我可以看到带有

字段
属性的对象。但是，当尝试查询图像时，我收到一个错误：


我想知道我的代码中是否有错误，或者是由于盖茨比的更改造成的？我使用的是盖茨比版本
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}=操作；
const processProject=project=>{
project.photos.forEach（异步照片=>{
让文件节点；
试一试{
fileNode=等待createRemoteFileNode({
url:photo.photo.url，
商店，
隐藏物
createNode，
createNodeId:id=>`projectPhoto-${photo.id}`，
});
等待createNodeField({
节点：fileNode，
名称：'项目照片'，
值：“true”，
});
等待createNodeField({
节点：fileNode，
名称：'在'创建'，
值：photo.created_at，
});
}捕获（错误）{
console.warn（'error creating node'，error）；
}
});
}
返回axios.get（baseapirl）。然后（res=>{
res.data.forEach（项目=>{
const nodeData=processProject（项目）；
createNode（nodeData）；
});
});
}
最后，似乎将
.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}=操作；
const processProject=project=>{
用于（项目的施工照片。照片）{
让文件节点；
试一试{
fileNode=等待createRemoteFileNode({
url:photo.photo.url，
商店，
隐藏物
createNode，
createNodeId:id=>`projectPhoto-${photo.id}`，
});
等待createNodeField({
节点：fileNode，
名称：'项目照片'，
值：“true”，
});
等待createNodeField({
节点：fileNode，
名称：'在'创建'，
值：photo.created_at，
});
}捕获（错误）{
console.warn（'error creating node'，error）；
}
}
}
返回axios.get（baseapirl）。然后（res=>{
res.data.forEach（项目=>{
const nodeData=processProject（项目）；
createNode（nodeData）；
});
});
}
Gatsby从您运行dev/build命令的地方获取资产，因此，我要说的是，尝试并放松异步模式。它在这里并没有真正给您带来任何东西，它可能会混合执行时间，从而导致节点API不按顺序启动。您的意思是只使用
。然后
来使用承诺而不是异步/wait？我不这么认为t应该是一个问题。中的示例也使用了async/await。这只是一个想法。在我这边的Gatsby构建中，无序执行的事情似乎经常发生。另一件让我有点吃惊的事情是，也许你不需要使用节点API来做这件事。我只使用
createPage
将最小的数据传递到节点以动态地执行c创建页面。在页面本身，我通过GraphQL进行图像查询。这有意义吗？看看我几周前提出的这个问题，与Contentful的问题类似：谢谢，我没有想到只使用
createPage
。这实际上很有意义。不幸的是，我还想添加一个包含所有列表的索引页面项目（我不动态生成该页面，但我想我也可以这样做）。不知何故，我通过稍微重新构造所有内容，使所有内容都正常工作。我使用了
onCreateNode
（除了图像，我还创建了其他数据）并且在那里声明了父/子关系。而且似乎使用forEach对async/await不太好。我使用了for of循环，不知怎么回事。有趣的解决方案，只是好奇-这段代码的最终目标是什么？创建了什么，一大页图像？我有一个api，它返回带有对象数组的jsons（每个对象都是一个包含一些详细信息+图像URL的项目）。我想显示给定项目的所有图像以及项目详细信息。最后，我修改了此处的解决方案。我创建了项目节点，然后添加了ProjectPhoto节点，并在它们之间创建了父/子链接。想法是1）从api获取数据2）使用
createRemoteFileNode
从URL抓取这些图像，这样它们就可以延迟加载3）在这两个节点之间创建连接，以便能够为项目提取正确的图像。这是我第一次使用Gatsby节点API，所以我可能把事情复杂化了一点，我不确定这是否是最好的方法。你会如何查询它？@SakhiMansoor
export const pageQuery=graphql
query（$id:String！）{projectmages:project（id:{eq:$id}）{childrenFile{id childImageSharp{fluid}