How to force 404 when you navigate to a dynamic path that doesn't exist?

Apologies in advance to Yang and the team because I’m really spamming the forum right now :laughing:

Any idea how I’d set up my catchall (if that’s the right place to do this) to force a 404 when I navigate to a page that’s reliant on data from a dynamic source?

Here’s how I’m doing my URL/content right now, and please tell me if this isn’t best practice:

  • Create a page intended to use dynamic data (product page etc)
  • Create data source that lists data (products etc) and filters API according to slug.
  • If slug = /123 then my API only returns items with “123” as the slug.
  • Use contents of datasource.[0] to populate page.

Issue: When someone navigates to mysite.com/slugthatdoesntexist, they either get fallback fields or empty blocks, when I want them to arrive at a 404 instead.

1 Like

Do I need to include my API endpoint in my catchall? Ideally I’d like a way to do this in studio, as having multiple projects in one codebase means I’d have to include a lot of info here

Any suggestions? Quite important :grin:

Recording for posterity here since this was answered in a separate thread, but you can insert a side effect component. This runs an interaction on load, and the interaction in this case would be a single step which is to navigate to a 404 page. The step is set to run conditionally only when the ferry of interest has an error.

Thanks @yang

Question: Can I load this any sooner, or am I going to have to my page to load in with empty components before it bounces to my 404 page?

There is one other very advanced component that you can use instead, which is similar to side effects but it is intended to wrap all of the rest of the contents of your page, and it will only render the contents if the condition is satisfied, otherwise it will run the interaction to redirect you elsewhere. I think that component is called condition guard or condition boundary or something like that