Understanding beforeLoad
Hello,
Yesterday, while playing with firebase auth and tanstack router, I ran into a problem with beforeLoad.
On an _authenticated layout I tried to reassign my auth value after it was verified so that the
Route.useRouteContext() is typed with { auth: User } and not { auth: User | null }.
Then I asked about it and Manuel Schiller help me to find out the problem. But then I wanted to understand how it works better so I cloned the router repository and read how the beforeLoad works here: https://github.com/TanStack/router/blob/d9a97e2693a726342ed8e9bda6af190902f34077/packages/react-router/src/router.ts#L2168. And I saw that before launching beforeLoad the context seems to add prev.__beforeLoadContext so I thought it's the previous beforeLoadContext value of the route match
I don't know if it's an issue or just because it's not specify directly in the docs about how it works but I decided to try something with it here https://stackblitz.com/edit/tanstack-router-rom7t2?file=src%2Froutes%2Findex.tsx
To test it like in the video we need to be in the state where in the Root context, the value is A (And can change to B, it's random). After that in the index context when the value is different of A we modify the value of the context. So it works well. If the value of Root context change to B in the video, the context of Index change to C, it's how it should work. But what is weird is when I invalidate and the Root context go back to A, the value on the Index context is still C.
I don't know if it's an issue or if we should not modify a key that was already in a previous context value or if I don't understand how it works, so I did not create an issue for this.
But if someone know exactly why it does this and if it's normal, I'll be happy to know what I didn't understand about beforeLoad usage.4 Replies
other-emerald•11mo ago
Hey, did oyu amange to fix this?
exotic-emerald•11mo ago
Hey, I think I had the same problem here https://discord.com/channels/719702312431386674/1300114602251649096
exotic-emerald•11mo ago
@potato I fixed it by doing this
exotic-emerald•11mo ago
(instead of re-setting the context prop, I just updated its type)