How to use create_local_resource with signals?

[spotlesscoder]

I am trying to develop a tiny game as a client-side rendered SPA

This is my code so far:

use cah_shared::games::User;
use leptos::prelude::*;
use leptos_reactive::create_local_resource;
use leptos_router::components::{Route, Router, Routes};
use leptos_router::*;
use reactive_stores::Store;
use std::sync::Arc;
pub mod api;
pub mod components;
pub mod infra;
pub mod pages;
use leptos_reactive::Resource;

use crate::api::API;
use crate::components::header::Header;
use crate::components::lobby::Lobby;
use crate::infra::websocket_context::WebSocketContext;
use crate::pages::{InvitePage, LogoutPage, NotFoundPage, ProfilePage, RankingPage};

#[derive(Clone, Debug, PartialEq)]
pub enum Theme {
    Light,
    LightHighContrast,
    Dark,
    DarkHighContrast,
}

#[derive(Clone, Debug, Store)]
pub struct GlobalState {
    read: ReadSignal<String>,
    write: WriteSignal<String>,
}

#[derive(Clone)]
pub struct UserContext {
    pub player_id_read: ReadSignal<String>,
    pub player_id_write: WriteSignal<String>,
    pub user_resource: Resource<String, User>,
}

#[component]
pub fn app() -> impl IntoView {
    let ws = WebSocketContext::new("ws://127.0.0.1:3004/ws");
    let base_url = "http://127.0.0.1:3004".to_string(); // TODO read from server env

    let (player_id, set_player_id) = signal("id".to_string());

    let api = Arc::new(API::new(base_url));
    let (theme, set_theme) = signal(Theme::Light);
    provide_context(theme);
    provide_context(set_theme);
    provide_context(ws.clone());
    provide_context(api.clone());
    let global_state = Store::new(GlobalState {
        read: player_id.clone(),
        write: set_player_id.clone(),
    });
    provide_context(global_state.clone());

    let user_resource = create_local_resource(move || player_id.get(), {
        let api = api.clone();
        move |id| {
            let api = api.clone();
            async move { api.users.get(id).await.unwrap() }
        }
    });
    provide_context(UserContext {
        player_id_read: player_id.clone(),
        player_id_write: set_player_id.clone(),
        user_resource: user_resource.clone(),
    });

    view! {
        <Router>
            <div class=move || {
                match theme.get() {
                    Theme::Light => "app bg-gray-50 text-gray-900 min-h-screen",
                    Theme::LightHighContrast => "app bg-white text-black min-h-screen border-y-2 border-black",
                    Theme::Dark => "app bg-gray-900 text-gray-100 min-h-screen",
                    Theme::DarkHighContrast => "app bg-black text-white min-h-screen border-y-2 border-white",
                }
            }>
                <Header ws=ws.clone() />
                <main class="container mx-auto p-4">
                    <Routes fallback=|| view! { <NotFoundPage/> }>
                    <Route path=path!("/profile") view=ProfilePage/>
                    <Route path=path!("/") view=move || view! { <Lobby ws=ws.clone() /> }/>
                        <Route path=path!("/invite") view=InvitePage/>
                        <Route path=path!("/ranking") view=RankingPage/>
                        <Route path=path!("/logout") view=LogoutPage/>
                    </Routes>
                </main>
            </div>
        </Router>
    }
}

fn main() {
    console_error_panic_hook::set_once();
    mount_to_body(|| {
        view! {
            <App />
        }
    });
}

Now I get this warning in the browser console when I run it

/game/main.rs:60:65, you access a reactive_graph::signal::read::ReadSignal<alloc::string::String> (defined at /workspace/game/main.rs:46:38) outside a reactive tracking context. This might mean your app is not responding to changes in signal values in the way you expect.

Here’s how to fix it:

1. If this is inside a `view!` macro, make sure you are passing a function, not a value.
  ❌ NO  <p>{x.get() * 2}</p>
  ✅ YES <p>{move || x.get() * 2}</p>

2. If it’s in the body of a component, try wrapping this access in a closure: 
  ❌ NO  let y = x.get() * 2
  ✅ YES let y = move || x.get() * 2.

3. If you’re *trying* to access the value without tracking, use `.get_untracked()` or `.with_untracked()` instead.

I don't really get what is causing the issue. I tried different things for creating the signal (RwSignal::new vs signal() vs cx.create_rw_signal) but nothing really helps here. I can't see what I'm missing

[gbj]

It's not obvious to me what the problem would be here, but it's possible it has to do with the way the resource is being used.

Is the program working as expected?

I'm also a little confused by this code, which I don't think compiles, and certainly not on a recent version -- create_local_resource does not exist in a version that also has path!() (I don't think?) and in the versions that use path!() for routing (0.7/0.8) local resources are their own type, and Resource does not have two generics. Which version are you using, in which this code compiles and gives a runtime error?

[spotlesscoder]

The program itself works - these are the versions I am using

[package]
name = "cah-leptos"
version = "0.1.0"
edition = "2021"

[dependencies]
anyhow = "1.0"
cah_shared = { version = "0.1.0", path = "../../libs/cah-shared"}
console_error_panic_hook = "0.1"
futures ={ version = "0.3"}
getrandom = { version = "0.2", features = ["js"] }
icondata = "0.6.0"
js-sys = "0.3"
leptos = { version = "0.8", features = ["csr", "hydrate"] }
leptos-fetch = "0.4"
leptos_icons = "0.7"
leptos_reactive = {version = "0.6", features = ["csr"]}
leptos_router = "0.8"
leptos_ws = {version = "0.9", features = ["hydrate"]}
rand_core = { version = "0.6", features = ["getrandom"] }
reactive_stores = "0.2.5"
serde = { version = "1.0", features = ["derive"] }
serde_json = "1.0"
wasm-bindgen = "0.2"
wasm-bindgen-futures = "0.4"
web-sys = { version = "0.3", features = ["Storage", "Window", "Document", "Element", "FileList", "File", "DomTokenList", "HtmlElement"] }