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

我有一个连接到 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)