What is the usage for async jobs?

[Magicloud]

For example, I could think of two kinds.

One, a background pulling from server for some status updates. I think spawn_local should be sufficient.

The other is common data fetching. Thanks for the example for that. In the example, I noticed that the fetching "will" be run in Cmd. But seems like Component::update() does not return Cmd. So I cannot fetching data directly in a Component event, and have to delegate to Application (via XMSG)?

[ivanceras]

@Magicloud yes is the current limitation, the Component can not fetch data directly, this is due to the fact that only Cmd can dispatch a msg. The Component can however specify some Effects which can contain information for fetching the data. You will then have to write a code to convert the Effects into a Cmd to do the actual fetching, then the result will be an update to the Component of the Application.

[Magicloud]

Here is the general code. Logs shows this exact message order being handled Next, ReloadTags, Panic. Loaded (and the one for ReloadTags) never occurred.

impl Component<Msg, app::Msg> for Tagging {
    fn init(&mut self) -> Effects<Msg, app::Msg> {
        log(&Array::of1(&"Tagging init".into()));
        Effects::with_local(vec![Msg::Next, Msg::ReloadTags])
    }

    fn update(&mut self, msg: Msg) -> Effects<Msg, app::Msg> {
        log(&Array::of1(&format!("Tagging update {msg:?}").into()));
        match msg {
            Msg::Next => {
                self.loading = true;
                Effects::with_local_async(vec![async {
// Fetching via reqwasm.
                        Msg::Loaded(result)
                    }]
                )
            }
            Msg::Loaded(x) => {
                self.loading = false;
                match x {
                    Err(e) => {
                        self.error_message = Some(ErrorMessage {
                            title: format!("{e}"),
                            detail: format!("{e:?}"),
                        });
                    }
                    Ok(x) => {
                        self.content = Some(x);
                    }
                }
                Effects::none()
            }
// Similar logic for `ReloadTags`.
        }
    }
}

[Magicloud]

Sorry, realized I made a confusing statement. "Logs shows ..." above, after Next, ReloadTags handler was not finished. It paniced during the process.

[ivanceras]

You can post the panic error message, so I can dig deep on this further.

[Magicloud]

App init frontend.js:685:17
Tagging init frontend.js:685:17
App update TaggingMsg(Next) frontend.js:685:17
Tagging update Next frontend.js:685:17
App update TaggingMsg(ReloadTags) frontend.js:685:17
Tagging update ReloadTags frontend.js:685:17
Uncaught RuntimeError: unreachable executed
    __wbg_adapter_25 http://localhost:4000/pkg/frontend.js:212
    real http://localhost:4000/pkg/frontend.js:193
frontend_bg.wasm:292184:1
    <anonymous> http://localhost:4000/pkg/frontend_bg.wasm:292184
    <anonymous> http://localhost:4000/pkg/frontend_bg.wasm:328961
    <anonymous> http://localhost:4000/pkg/frontend_bg.wasm:50884
    <anonymous> http://localhost:4000/pkg/frontend_bg.wasm:65108
    <anonymous> http://localhost:4000/pkg/frontend_bg.wasm:246516
    <anonymous> http://localhost:4000/pkg/frontend_bg.wasm:332080
    __wbg_adapter_25 http://localhost:4000/pkg/frontend.js:212
    real http://localhost:4000/pkg/frontend.js:193

[Magicloud]

I reduced ReloadTags handler to minimal, and it still panic. Also tried to insert some log lines. Seems like nothing in the async block was touched.

            Msg::ReloadTags => {
                self.loading = true;
                Effects::with_local_async(
                    vec![async {
                        let result = try {
                            let value = Request::get("http://localhost:3000/tags")
                                .send().await?
                                .json::<Value>().await?;
                            let value: Vec<Tag> = serde_json::from_value(value)?;
                            value
                        };
                        Msg::LoadedTags(result)
                    }]
                )
            }

[ivanceras]

I've just added a new example albeit simplistic for fetching data at the component level.
https://github.com/ivanceras/sauron/tree/master/examples/fetch-data-component

[Magicloud]

Thanks.

Sorry, I was busy to checkout the whole thing. Just gave it a glance, so you fetched data directly in init, instead of a message handler. I will try it and see if it works with two parallel fetching.