[SOLVED] Astro dynamic routing (SSR mode) and 404 page

Astro dynamic routing (SSR mode) and 404 page

I am using Astro and Apollo client to fetch data using GraphQL.

In Astro I am using SSR only.

I have set up the following Astro dynamic routing (SSR mode):

// [...slug].astro

---
import Page from '../components/page/Page.astro';
import Layout from '../layouts/Layout.astro';
---

<Layout title="Test">
  <Page />
</Layout>

And Page.astro:

// Page.astro
---
import PageOne from '../PageOne.astro';
import PageTwo from '../PageTwo.astro';

const uri = `/${Astro.params.uri}`;

const { data, loading } = await client.query<
  GetPageQuery,
  GetPageQueryVariables
>({
  query: GET_PAGE,
  variables: {
    url: uri,
  },
});

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


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

{loading && <p>Loading...</p>}
{!loading && <Component uri={uri} />}

This is all working fine. So when I request a request an existing route/path uri (which exist in the backend), I can query the type (data.page?.type) and then I map to the proper Astro component, e.g PageOne or PageOne (.astro). However when I navigate to a non-existing url I get an error:

Unable to render Component because it is undefined! Did you forget to import the component or is it possible there is a typo?

How to fix this issue?

Solution

You could just add a check if the component is valid and then redirect (or do something else) e.g.

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

if (!Component) {
  return Astro.redirect("/404");
}