且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

如何使用 Graphql 从 Strapi 查询 Gatsby 中的多个图像

更新时间: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.