NotFound never reached
Our generated API client rejects its promise on a 404 err. Resulting in react-query to throw an error. I would like to use the NotFoundComponent. However, 404's are also redirected into the errorComponent. Is there an option to somehow decide whether it should be redirect to the error component or the NotFoundComponent?
Handling it in the errorComponent itself is a bit annoying, since now I can rely less on parent notfound component
5 Replies
modern-teal•2y ago
You are enable to throw a
notFound in the loader to trigger the not found page.
https://tanstack.com/router/latest/docs/framework/react/guide/not-found-errors#notfound-and-notfoundcomponentNot Found Errors | TanStack Router Docs
⚠️ This page covers the newer notFound function and notFoundComponent API for handling not found errors. The NotFoundRoute route is deprecated and will be removed in a future release. See Migrating from NotFoundRoute for more information.
Not-found errors are a special class of errors that may be thrown in loader methods and components to signa...
foreign-sapphireOP•2y ago
I'm aware, but I think because the query already throws (rejected promises throw in react query) it is going to the errorComponent before I can check if data is null
modern-teal•2y ago
If I'm not mistaken react-query bubbles up the error thrown by your fetch-fn. Maybe consider augmenting your fetch function to perform the necessary checks on the response and throw a predictable error or the
notFound function itself.
Or you could try-catch the content of your loader, check the error thrown and if it matches the signature of the type of Error you want to trigger the not found page, then you can conditionally trigger it.foreign-sapphireOP•2y ago
try catch might do it, thx, I'll try that
modern-teal•2y ago
Yup, this is mostly an error handling thing. The primitives/utilities are exported by the router package, but its up to you to use them.