更新时间:2022-12-04 22:23:02
截至目前,还没有官方"的解决方案让它发生的方法.但是有一种解决方法可以在构建过程中创建自定义节点.对于像下面这样的 graphql 查询
As of now, there is no "official" way to make it happen. But there is a workaround which creates a custom node in the build process. For a graphql query like below
query MyQuery {
allStrapiPortfolio {
edges {
node {
category {
images {
localFile {
childImageSharp {
fluid {
base64
tracedSVG
srcWebp
srcSetWebp
originalImg
originalName
}
}
}
}
}
}
}
}
}
下面给出的代码在 images
之后创建了 localFile
节点.代码应该放在 gatsby-node.js
中.
The code given below creates the localFile
node after images
. The code should go in gatsby-node.js
.
const { createRemoteFileNode } = require(`gatsby-source-filesystem`);
exports.onCreateNode = async ({ node, actions, store, cache }) => {
const { createNode, createNodeField } = actions;
if (node.internal.type !== null && node.internal.type === "StrapiPortfolio") {
for (const category of node.category) {
for (const image of category.images) {
console.log(image);
const fileNode = await createRemoteFileNode({
url: "http://localhost:1337" + image.url,
store,
cache,
createNode,
createNodeId: (id) => image.id.toString(),
});
if (fileNode) {
image.localFile___NODE = fileNode.id;
}
}
}
}
};
请注意,您必须根据需要自定义代码.在我的解决方案中,由于我的数据结构,我使用了两个 for 循环.如果您不确定或只想检查您的自定义代码是否有效,您只需在第一个 if 语句和 console.log(image) 之前添加一个
console.log(node)
在第二个 for 循环之后(在我的例子中).这应该可以让您了解您的数据结构以及您应该以何种方式继续.
Please note that you will have to customize the code depending on your needs. In my solution, I used two for loops because of my data structure. If you're unsure or just want to check if your custom code works, you can simply add a console.log(node)
before the first if statement and a console.log(image)
after the second for loop(in my case). That should give you an indication about your data structure and in which way you should proceed.