Resource + Effect: getting resource inside Effect.

[rgr-1]

SSR
leptos = { version = "0.7.2" }

The setup

• Resource and Effect depend on same signal.
• signal controls what resource content should be loaded from server

Problem observed:

• Effect runs twice, both time with new signal value
• first time Effect returns "old" resource immediately
• second time Effect returns correct "new" resource after it's received from server.

Question about "on signal change":

• who will be triggered first? Resource or Effect? looks like Effect..
• why Effect is triggered second time? I.e. is Resource act as signal for Effect?

What might be good way:
Resource is triggered first and consequent resource.get() in Effect would return None for that Option till resource loaded

General question:
I am sure this is pretty common problem and I might just overlooked something.. What I need is just a way to await for resource to be loaded in the Effect.

#[server]
async fn get_text(s:String) -> Result<String, ServerFnError> {
    // insert a simulated wait
    tokio::time::sleep(std::time::Duration::from_millis(2000)).await;

    let res = match s.as_str() {
        "0" => "text 0".to_string(),
        "1" => "text 1".to_string(),
        _ => "text others".to_string(),
    };
    Ok(res)
}

#[component]
fn CustomTheme() -> impl IntoView {
    let text_val = RwSignal::new(String::from("initial"));
    let rb_val = RwSignal::new(String::new());  

    let string_resource = Resource::new(
        move || rb_val.get(),
        |req| get_text(req)
        //|req| fetch_get_text(req)
    );
    
    Effect::new( move |_|  {
        logging::log!("effect: start with req={:?}", rb_val.get());

        let text =  match string_resource.get() {
            Some(g) => {
                            let res = g.unwrap_or_else(|_| String::from("Server error"));
                            logging::log!("effect: Some. req={:?} -> got resource={:?}", rb_val.get(), res);
                            res
                        },
            None => {
                        logging::log!("effect: None. req={:?}", rb_val.get());                        
                        return
                    }, 
        };

        // In app here I use resource (talk to js with it). Not present here.

        logging::log!("effect: to use resource={:?}", text);
        text_val.set(text); 
    });

    view! {
        <ConfigProvider theme>
            <Card>
                <Flex vertical=true>
                    <div>
                    <RadioGroup value=rb_val>
                        <Radio value="0" label="0"/>
                        <Radio value="1" label="1"/>
                        <Radio value="2" label="2"/>
                    </RadioGroup>
                    </div>
                    <div>
                    <p> "Server text:" {text_val}</p>
                    <button> "Server resp:" {text_val} </button>
                    </div>
                </Flex>
            </Card>
        </ConfigProvider>
    }

}

The result:

The current working solution.
Just use Resource reactivity without Effect
Which is not without problem though:

• looks a bit strange
• cannot access signals as in Effect

    let string_resource = Resource::new(
        move || rb_val.get(),
        //|req| get_text(req)
        |req| fetch_get_text(req)
    );
    
    async fn fetch_get_text(req: String) -> Result<String, ServerFnError>{
        logging::log!("fetch_get_text: req={:?} start--", req);

        let res = get_text(req).await; // get data from server
        let text = match res {
            Ok(text) => text,
            Err(_) => { String::from("Server error")} 
        }; 

        cfg_if::cfg_if! {
            if #[cfg(feature = "hydrate")] {

                // here I talk to js with correct resource in hand
                logging::log!("fetch_get_text: got resource={:?}", text);

                // However I cannot talk to signals here
                // text_val.set(text);
            }
        }

        logging::log!("fetch_get_text: --end ");
        return Ok(text);
    }

[gbj]

Here is the behavior of these two primitives:

• a signal notifies an effect every time it is updated, and always has its current value when it is read
• a resource notifies an effect every time it finishes loading, and always has its current value when it is read; the value is not reset from Some(_) to None while it is loading

This means that, because your effect depends on both your signal and your resource, it is notified twice: once when you change the signal, and once when the resource resolves.

[rgr-1]

Thanks
This is clear. Almost as expected for Effect-Resource relations.

I can understand pros and cons to keep old resource value till new loaded, but there should be a way to know.. I.e. the question is: how could I know that it's "new resource is loaded" triggered the Effect and not signal change?

[rgr-1]

Well I might have two Effects..
The second should not touch the signals and only have resource..

I will try it, but it's probably still not ideal way in general case.

Thanks for helping.

[gbj]

how could I know that it's "new resource is loaded" triggered the Effect and not signal change?

There used to be a loading method on a Resource that returned a signal, but it was very easy to accidentally create hydration issues using that.

In your case, it would be possible to store the previous value of the resource, and then check if it was changed. This is because the Effect closure takes its previous value as its argument. So if you have the effect closure return the value of the resource on this run (rather than () as it does now), you can check to see if the previous value is the same as the current value.

[rgr-1]

Understood.
This might work. However in my case resource is a reasonable big Vec and while comparison is an option I might be (well I am) get away with separate Effect for resource update.

Thanks again. You input is very helpful.. as always.

[rgr-1]

With this crystal clear explanation of the Resource-Effect relations I flag the "use separate Effects" as the answer to my problem.