How to handle dynamic routes, non existing pages and no existing data from GraphQL request in Astro project

How do I solve the following issue in my Astro project:

I can request the page content data for various pages from my GraphQL endpoint. I am using Apollo Client for this.

Using the following query as an example:

query Page($target: String!) {
  page(target: $target) {
    id
    type
    content {
      ...on PageOne {
        id
        title
        field
      }
      ...on PageTwo {
        id
        title
        anotherField
      }
      ...on PageThree {
        id
        title
        description
      }
    }
  }
}

In Astro I created dynamic routes:

// pages/[...url].astro
---
import { Page } from '../components/page';

const url = `/${Astro.params.url}`;
---
<Page url={url} />

Note: I like to have a separate Astro component for the logic and mapping:

// Page.astro
---
const { url } = Astro.props;

const { data, loading } = await client.query({
  query: GET_PAGE,
  variables: {
    target: url,
  },
  errorPolicy: 'all',
});


const Map = {
  "PageOne": PageOneComponent,
  "PageTwo": PageTwoComponent,
};

const Component = Map[data.page?.type]
---

<Component content={content} />

This all works fine. When hitting a certain target url (existing in the backend) I can request the data and pass it via a prop to the individual corresponding Astro components (PageOneComponent, PageTwoComponent etc).

The problem starts when trying a non existing page. Or trying a page with a page type which exist in the backend but I am not querying the content yet, since I am gradually building and adding the pages.

On a non existing page data.page?.type is undefined. How do I handle this in a clean way?

I can do something like this in [...url].astro:

if (data.page?.type in Map === false) {
 return new Response(null, {
 status: 404,
 statusText: 'Not found',
 });
}

Unfortunately I cannot do above inside Page.astro then I get the following error:

ResponseSentError: The response has already been sent to the browser
and cannot be altered.

1. Do I have to make then another GraphQL query inside [...url].astro to solve this issue?
2. And what about the other case (existing page without content)?
3. Just a non existing page which should return a 404 page.

I can simply move everything to [...url].astro but then that file becomes very crowded. I like to extract things to its own components and folders.