Why do my Astro builds fail when featuredImage is null?

I'm using WPGraphQL to query all of my posts from WordPress. And I'm using Astro to display a list of cards for each of those posts on the front-end.

Here is what that my GraphQL query looks like:

/* BASIC FETCH API */

async function fetchAPI(query, { variables } = {}) {
      const headers = { "Content-Type": "application/json" };
      const res = await fetch(API_URL, {
        method: "POST",
        headers,
        body: JSON.stringify({ query, variables }),
      });
    
      const json = await res.json();
      if (json.errors) {
        console.log(json.errors);
        throw new Error("Failed to fetch API");
      }
      return json.data;
    }

/* ALL POSTS QUERY */

export async function getAllPosts() {
  const data = await fetchAPI(`
        {
          posts(first: 10000) {
            edges {
              node {
                id
                title
                content
                excerpt
                slug
                categories(first: 2) {
                  nodes {
                    slug
                    name
                  }
                }
                featuredImage {
                  node {
                    sourceUrl
                  }
                }
              }
            }
          }
        }
    `);
  return data?.posts;
}

And here is how I am rendering those posts on my blog page:

<Section>
    <Container>
      <div class="post--card--wrapper">
        {page.data.map((post) => (
          <PostCard
            src={post.node.featuredImage.node.sourceUrl}
            href={`/posts/${post.node.slug}`}
            title={post.node.title}
            excerpt={`${post.node.excerpt.slice(0, 120)}...`}
          />
        ))}
      </div>
      <div class="pagination--wrapper py-6">
        {page.url.prev ? (
          <a href={page.url.prev || "#"} class="pagination--previous">
            ← Previous
          </a>
        ) : null}
        {page.url.next ? (
          <a href={page.url.next || "#"} class="pagination--next">
            Next →
          </a>
        ) : null}
      </div>
    </Container>
  </Section>

And this is the code for the PostCard.astro component:

---
export interface Props {
  href?: string;
  src?: string;
  alt?: string;
  title?: string;
  categories?: string;
  excerpt?: string;
}

const { href, src, alt, title, categories, excerpt } = Astro.props;
---

<a href={href} class="post--card">
  {src && <img src={src} alt={alt} class="post--thumbnail" />}
  <div class="post--card--bottom">
    <h5 class="post--card--heading">{title}</h5>
    <div class="post--card--excerpt" set:html={excerpt}></div>
  </div>
</a>

The problem is that a few of the posts do not have featured images set. And so, my builds are failing with the following error message:

"TypeError: Cannot read properties of null (reading 'node')"

I basically want to tell GraphQL to grab the featuredImage field for each post if it exists. But if featuredImage does not exist, keep going and get the rest of them.