Astro+Hygraph分页懒加载时出现url读取未定义错误

问题场景 #

按照分页与懒加载教程实践，将教程中的post替换为product适配自有数据，排序方式改为按publishedAt倒序，尝试加载3个商品实现「加载更多」按钮时，出现错误：TypeError: Cannot read properties of undefined (reading 'url')。

相关代码如下：

index.astro 代码 #

---
import Card from "../components/Card.astro";
import BaseLayout from "../layouts/BaseLayout.astro";

const pageTitle = "My Page Title";

const pageSize = 3;

const response = await fetch(import.meta.env.PUBLIC_HYGRAPH_ENDPOINT, {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
    Accept: "application/json",
  },
  body: JSON.stringify({
    query: `query MyQuery($size: Int) {
          pages:productsConnection(first: $size, orderBy: publishedAt_DESC) {
            products:edges {
              node {
                id
                title
                publishedAt
                slug
                previewImage {
                  id
                  url
                }
              }
            }
            pageInfo {
              hasNextPage
              hasPreviousPage
            }
          }
        }
        `,
    variables: { size: pageSize },
  }),
});

const data = await response.json();
const { pages } = data.data;
---

<BaseLayout pageTitle={pageTitle}>
  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 justify-center">
    {
      pages.products.map((product) => {
        return <Card title={product.title} image={product.previewImage.url} />;
      })
    }
  </div>
</BaseLayout>

Card.astro 代码 #

---
const { title, image } = Astro.props;
const maxTitleLength = 32;
const shortTitle =
  title.length > maxTitleLength
    ? `${title.substring(0, maxTitleLength)}...`
    : title;
---

<div class="card sm:w-full lg:w-96 bg-primary">
  <figure>
    <img class="object-cover h-64 w-full" src={image} alt={title} />
  </figure>
  <div class="card-body overflow-hidden">
    <h2 class="card-title">{shortTitle}</h2>
    <div class="card-actions justify-center">
      <button class="btn btn-glass">More Details</button>
    </div>
  </div>
</div>

错误原因 #

该错误说明product.previewImage为undefined或null，即存在商品未配置previewImage字段，或Hygraph API返回的数据中该字段缺失。

解决方案 #

1. 前端空值处理（最直接） #

在传递image参数时，使用可选链操作符（?.）避免读取undefined的属性，同时可设置默认图片作为 fallback：

修改index.astro中的map渲染部分：

pages.products.map((product) => {
  // 使用可选链，若previewImage不存在则返回undefined，再用||设置默认图
  const imageUrl = product.previewImage?.url || '/path/to/your/fallback-image.png';
  return <Card title={product.title} image={imageUrl} />;
})

2. 在Card组件中二次处理 #

如果希望组件本身具备容错能力，可在Card.astro中添加默认图片逻辑：

---
const { title, image } = Astro.props;
const maxTitleLength = 32;
const shortTitle = title.length > maxTitleLength
  ? `${title.substring(0, maxTitleLength)}...`
  : title;
// 设置默认图片地址
const fallbackImage = '/path/to/your/fallback-image.png';
---

<div class="card sm:w-full lg:w-96 bg-primary">
  <figure>
    <img class="object-cover h-64 w-full" src={image || fallbackImage} alt={title} />
  </figure>
  <div class="card-body overflow-hidden">
    <h2 class="card-title">{shortTitle}</h2>
    <div class="card-actions justify-center">
      <button class="btn btn-glass">More Details</button>
    </div>
  </div>
</div>

3. 检查并补全Hygraph数据 #

登录Hygraph后台，检查所有商品的previewImage字段是否已正确上传图片，确保数据完整性。若允许商品无图片，需在前端保留上述空值处理逻辑。

4. 调试API返回数据 #

在index.astro中添加日志，确认API返回的具体数据结构：

const data = await response.json();
console.log(data.data.pages.products); // 查看每个product的previewImage是否存在
const { pages } = data.data;

内容的提问来源于stack exchange，提问作者Spectari