Global state requiring axum context

[lukexor]

I'm not sure if this is an anti-pattern or if there's a way to get this to work. I need to create some global context signals that rely on resources from server functions. Those server functions require context from the root object that sets up the leptos routes because in addition to spawning a web server, it spawns some background threads that handle messaging and status updates from other services.

I need to share these resources across routes for dynamic updates.

Basically I have the following routes and HTML structure:

    Ok(Router::new()
        .leptos_routes_with_context(
            &conf.leptos_options,
            routes,
            {
                let service = service.clone(); // This is the background service context I need access to
                move || provide_context(service.clone())
            },
            {
                let leptos_options = conf.leptos_options.clone();
                move || shell(leptos_options.clone())
            },
        )
        .fallback(leptos_axum::file_and_error_handler(shell))
        .with_state(conf.leptos_options))

<Router>
    <AppProvider>
        <Nav />
        <Header />
        <FlatRoutes>
            <Route path=StaticSegment("/home" view=Home>
            <Route path=StaticSegment("/settings" view=Settings>
            /* etc... */
        </FlatRoutes>
    </AppProvider>
</Router>

Where AppProvider would provide some context - which includes some Resources for data requiring the service context from the router. It also includes some actions, one of which is a FormData for file uploads that requires Action::new_local which will refetch these resources.

However, this doesn't work because AppProvider is outside of a given route, and apparently the context only exists under a Route component.

So what I've been trying to do is conditionally get the context - if it exists and is Some, return it, otherwise create it and provide it. This mostly works, but then I get dispose errors when trying to navigate and I sometimes get SendWrapper panics (because of the local action) when refreshing the page.

The reason this state needs to be higher up is because the Header needs access to some of it. I also tried removing the dependency from the Header by using a Portal - but so far I still have issues.

Is there any other way to inject state/context into the root of the app? These resources should live for the entire lifecycle of an app session, regardless of route. Or if there's another way to handle the data flow, I'm open - This structure was originally implemented in a React app and migrating is proving a bit painful since certain patterns don't work the same

[dustypomerleau]

I don't think your Nav and Header components need to be outside a Route.

You could, for example, have a ParentRoute that matches StaticSegment(""), and contains all of your other Routes. The view associated with the ParentRoute can contain your Nav, Header, and an Outlet for the child routes. And then you could load your global Resource in the ParentRoute and immediately provide it as context.

Essentially, what I'm suggesting is that all of the functionality of your AppProvider can be inside the view for a top-level ParentRoute instead.

<Router>
    <main>
        <Routes>
            <ParentRoute path=StaticSegment("") view=AppProvider>
                <Route path=StaticSegment("/home" view=Home>
                <Route path=StaticSegment("/settings" view=Settings>
                // ...
            </ParentRoute>
        </Routes>
    </main>
</Router>

[benwis]

I'm not sure if this is an anti-pattern or if there's a way to get this to work. I need to create some global context signals that rely on resources from server functions. Those server functions require context from the root object that sets up the leptos routes because in addition to spawning a web server, it spawns some background threads that handle messaging and status updates from other services.

I need to share these resources across routes for dynamic updates.

Basically I have the following routes and HTML structure:

    Ok(Router::new()
        .leptos_routes_with_context(
            &conf.leptos_options,
            routes,
            {
                let service = service.clone(); // This is the background service context I need access to
                move || provide_context(service.clone())
            },
            {
                let leptos_options = conf.leptos_options.clone();
                move || shell(leptos_options.clone())
            },
        )
        .fallback(leptos_axum::file_and_error_handler(shell))
        .with_state(conf.leptos_options))

<Router>
    <AppProvider>
        <Nav />
        <Header />
        <FlatRoutes>
            <Route path=StaticSegment("/home" view=Home>
            <Route path=StaticSegment("/settings" view=Settings>
            /* etc... */
        </FlatRoutes>
    </AppProvider>
</Router>

Where AppProvider would provide some context - which includes some Resources for data requiring the service context from the router. It also includes some actions, one of which is a FormData for file uploads that requires Action::new_local which will refetch these resources.

However, this doesn't work because AppProvider is outside of a given route, and apparently the context only exists under a Route component.

So what I've been trying to do is conditionally get the context - if it exists and is Some, return it, otherwise create it and provide it. This mostly works, but then I get dispose errors when trying to navigate and I sometimes get SendWrapper panics (because of the local action) when refreshing the page.

The reason this state needs to be higher up is because the Header needs access to some of it. I also tried removing the dependency from the Header by using a Portal - but so far I still have issues.

Is there any other way to inject state/context into the root of the app? These resources should live for the entire lifecycle of an app session, regardless of route. Or if there's another way to handle the data flow, I'm open - This structure was originally implemented in a React app and migrating is proving a bit painful since certain patterns don't work the same

I believe I would move your AppProvider inside the FlatRoutes component, but overall this structure should work. Assuming your AppProvider contains an Outlet, we do have this open bug that could be affecting you for this scenario. #3042

[lukexor]

So I tried to do the ParentRoute/Context approach but ran into a number of other issues with Context not passing through for Thaw and the Router.

Things like use_location inside the Header component stopped reactively updating on navigation, and the RoutingProgress stopped working.

I wasn't able to figure out how to solve it even using the outer_owner.with approach.

[benwis]

Unfortunately it's not really possible to diagnose that. There's a PR open for context joining which seems to fix the issue I mentioned, but it's possible you have a different one or are making a different mistake

[lukexor]

That's fine, just wanted to note that the work-arounds mentioned above weren't straightforward given other constraints currently with the application

I decided to just change the architecture a bit so that the signals and actions that the resources rely on are higher in the ownership tree (outside of a Route) for use in the header, and each route can just fetch resources separately.

When the context joining is merged I may try this again