Updating router context after top level App re render?
Hi,
I'm hitting a gnarly corner case with
@tanstack/react-router, that may be indicative that I'm holding it wrong. Here's the high level: I'm querying user profile information once and storing it in a Context to avoid having to drill it throughout my whole application. For onboarding, I have a route that submits the requisite data to the onboarding endpoint, which sets the onboardingRequired flag to false in the backend. I'm hoping then to coordinate re-fetching the user profile (and triggering a re-render of the whole app, which is OK).
The issue is that I have a pathless _login route that enforces users are logged in for all child routes. In _login's beforeLoad, I check for onboardingRequired and redirect to the onboarding route as required. However, after the onboarding form is submitted, the following actions are performed:
1. POST to the onboarding endpoint
2. Onboarding endpoint triggers synchronous refetch of user profile query, but does not trigger top level component render
3. Routes re-compute context (redirecting back to the onboarding route because of stale data)
4. Top level component finally re-renders with updated data, returning a RouterProvider with a new context value
5. Routers do not re-compute context
As a result, after submitting the onboarding form, the user completes onboarding in the backend, but requires the user to click the submit button a second time to get past the onboarding screen.
I think the core of the issue is that I want steps 3 and 4 to happen in the opposite order, but I can't figure out how to do that. I've created a small reproducer on StackBlitz. Note that on route B, clicking the button the first time doesn't update the value as expected. Subsequent button clicks do update the value but one step behind.
Is there a simple fix here? Or am I doing it wrong? I do generally need user information in my route contexts to populate breadcrumbs and such.
Thanks!StackBlitz
Router Basic File Based Example (duplicated) - StackBlitz
Run official live example code for Router Basic File Based, created by Tanstack on StackBlitz
0 Replies