多图像，无法从数组中获取第一张图像

Question

我有一个连接到 Strapi 后端的 gatsby 应用程序。
在我的主页上，我想显示画廊中的所有项目及其第一张图片。

我的查询如下所示：

        allStrapiProject {
          edges {
            node {
              title
              gallery{
                localFile{
                  publicURL
                  childImageSharp {
                    gatsbyImageData(
                      placeholder: BLURRED
                      formats: [AUTO, WEBP, AVIF]
                      layout: FULL_WIDTH
                    )
                  }
                }
              }
            }
          }
        }

我的index.js看起来像这样

    <Layout>
      <div id="projects" className="featured-grid">
        {data.allStrapiProject.edges.map(({node: project}) => {
          const image = getImage(project.gallery[0].localFile);
          return (
            <div>
              <p>{project.title}</p>
              <GatsbyImage image={image} />
            </div>
          )
        })}
      </div>
    </Layout>

我收到这个错误

Error in function eval in ./src/pages/index.js:18
Cannot read properties of null (reading '0')

好像它不让我从数组中获取第一个值。同样，当我执行 console.log(project.gallery) 时，我可以看到所有数组，但是当我尝试 console.log(project.gallery[0]) 时，我得到了同样的错误。

有什么想法吗？

编辑* console.log(project.gallery)

Answer 1

决议是：

{
  project.category.name === "Photo" && (
    <GatsbyImage
      image={getImage(project.gallery[0].localFile)}
      alt="asdasdasd"
      className=""
    />
  );
}

问题是某些类别不包含 gallery 节点，因此该方法应仅适用于 Photo

多图像，无法从数组中获取第一张图像

Multi images, cannot get first image from array

strapi

gatsby