NotFound never reached

[vocal parrot]

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

[dreamy sedge]

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-notfoundcomponent

[vocal parrot]

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

[dreamy sedge]

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.

[vocal parrot]

try catch might do it, thx, I'll try that