Router Loaders parallelism in a CRM app project
Hello,
I am really wondering what should be the best use-cases for loaders in my case. I am building a CRM using tanstack-router and I have a lot of URLs like this:
/entity/$entityId/entityBs or /entity/$entityId/entityBs/$entityBId. My problem is what is $entityId does not exists server-side, all the loaders of the child routes still gets executed for no reason since we know the parent does not exist.
Any advices? Should I only be using loaders for my top-level entity page and not for nested routes?
Phil13 Replies
sensitive-blue•12mo ago
You can use
beforeLoad, which runs before loader and does not run in parallel
if you get an error in your beforeLoad your other loaders will not runfascinating-indigoOP•12mo ago
Interesting. So instead of using
queryClient.ensureData in my top-level loader I could instead do it in my beforeLoad and throw from there...
Well, it wouldnt be using ensureData in this case but yeah. That's a great idea I could try
Ok! This seems to be work, the only thing in when I throw the notFound() it seems to unload my entire UI and gives me a full not found page instead of just displaying a NotfoundPage in the outlet of where I was in the routersensitive-blue•12mo ago
This is odd, afaik it should only unmount the component where
notFound was thrown, let me read docs and test for myself
https://tanstack.com/router/latest/docs/framework/react/api/router/NotFoundErrorType#global-property
make sure you do not use the global option in any way, otherwise, it should only fail to render the component of the match where the error occursfascinating-indigoOP•12mo ago
Yeah def not using it. I'll keep looking may be it's something odd in my router definitions
sensitive-blue•12mo ago
You can try making a minimal reproduction and post it here, then I or maintainers of the router could further help you
seems like the
global property is deprecated anywayfascinating-indigoOP•12mo ago
It's funny because if I throw an error instead of a notFound, it displays what I expect
sensitive-blue•12mo ago
i've tried it in a stackblitz demo, and yeah, it seems that whatever I do, it goes to the root not found component for some reason
sensitive-blue•12mo ago
Leaving this repro here for the maintainers:
https://stackblitz.com/edit/tanstack-router-hrkpfn?file=src%2Froutes%2F_layout.tsx,src%2Froutes%2F_layout%2F_layout-2.tsx,src%2Froutes%2F_layout%2F_layout-2%2Flayout-b.tsx&preset=node
StackBlitz
Router Basic File Based Example (forked) - StackBlitz
Run official live example code for Router Basic File Based, created by Tanstack on StackBlitz
sensitive-blue•12mo ago
More context:
layout-b.tsx component throws notFound(). _layout.tsx, _layout-2.tsx and layout-b.tsx all have a notFoundComponent defined, but the router renders the notFoundComponent of the __root.tsx file.fascinating-indigoOP•12mo ago
I think it's normal because if
beforeLoad is being called in serial, it has no idea on where it's at in the tree. I think to solve my issue I need to look at something other than using beforeLoadoptimistic-gold•12mo ago
just a bit of clarification. when you say "does not exists server-side", you don't mean this in a SSR way, right?
and yes, throwing
notFound in beforeLoad leads to the behavior you experience. see also https://discord.com/channels/719702312431386674/1007702008448426065/1271112762277494905
you could check the existence in a beforeLoad, then return the result so it is added to the router context. then in loader, check the context and continue loading or throw a notFoundother-emerald•12mo ago
@Manuel Schiller i think this is very important to showcase this behaviour maybe inside of one of the react query examples. I bumped into a very similar issue and it was not instantly clear on how to deal with errors inside layout component regarding a query request. But thanks for your explanation very helpful as usual
fascinating-indigoOP•12mo ago
@Manuel Schiller Yes I was not talking about SSR. Ok thanks for the link, I don't think anybody using this library would expect this behavior so perhaps it should be better documented here: https://tanstack.com/router/latest/docs/framework/react/guide/data-loading. Reading this I expect errors, including not-found errors to be handled at the route level as written.
Also thank you for the suggestion, it makes a lot of sense in this context so that's what I will be implementing for sure.
Great community on here 🙂