Passing resources to child components

[filips123]

Is there any recommended and easy way to pass values returned from use_resource to child components?

The main way of accessing values from use_resource is &*resource.read_unchecked(), which returns a reference. However, components cannot accept references, so that value needs to be converted to owned before it can be passed to them.

For simple types, such as &String, it seems that Dioxus already does some implicit conversion (or cloning?), as can be seen on the docs page example for use_resource. In this example, the weather variable that is passed to the WeatherElement component inside the match case is actually &String, but it's still accepted by the WeatherElement which only accepts the owned String.

However, this doesn't work for more complex types, such as Vec. In that example, functions and components can be slightly modified to use the weather as Vec<String>:

use dioxus::prelude::*;

#[derive(Clone)]
struct WeatherLocation {
    city: String,
    country: String,
    coordinates: (f64, f64),
}

async fn get_weather(location: &WeatherLocation) -> Result<Vec<String>, String> {
    Ok(vec!["Sunny".to_string()])
}

#[component]
fn WeatherElement(weather: Vec<String>) -> Element {
    rsx! { p { "The weather is {weather:#?}" } }
}

fn app() -> Element {
    let country = use_signal(|| WeatherLocation {
        city: "Berlin".to_string(),
        country: "Germany".to_string(),
        coordinates: (52.5244, 13.4105),
    });

    // Because the resource's future subscribes to `country` by reading it (`country.read()`),
    // every time `country` changes the resource's future will run again and thus provide a new value.
    let current_weather = use_resource(move || async move { get_weather(&country()).await });

    rsx! {
        // the value of the resource can be polled to
        // conditionally render elements based off if it's future
        // finished (Some(Ok(_)), errored Some(Err(_)),
        // or is still running (None)
        match &*current_weather.read_unchecked() {
            Some(Ok(weather)) => rsx! { WeatherElement { weather } },
            Some(Err(e)) => rsx! { p { "Loading weather failed, {e}" } },
            None =>  rsx! { p { "Loading..." } }
        }
    }
}

fn main() {
    dioxus::LaunchBuilder::desktop().launch(app);
}

However, this now fails, as WeatherElement expects Vec<String>, but weather inside the match case is &Vec<String>:

[cargo] error[E0308]: mismatched types
  --> src\main.rs:36:58
   |
36 |             Some(Ok(weather)) => rsx! { WeatherElement { weather } },
   |                                                          ^^^^^^^- help: try using a conversion method: `.to_vec()`
   |                                                          |
   |                                                          expected `Vec<String>`, found `&Vec<String>`
   |                                                          arguments to this method are incorrect
   |
   = note: expected struct `Vec<_>`
           found reference `&Vec<_>`
note: method defined here
  --> src\main.rs:15:19
   |
15 | fn WeatherElement(weather: Vec<String>) -> Element {
   |                   ^^^^^^^-------------

I found three ways to fix this problem, but none of them seem to be efficient and ergonomic:

The first one is to just convert the value to the owned type, for example with .to_vec() or .clone() when passing it to the component. However, this doesn't seem to be so ergonomic, as it makes passing arguments longer to type. Also, it doesn't seem to be efficient to clone the value for every component if there are more of them, especially if the value has to be passed to additional components inside child components and cloned there again.

The second one is to apply use_signal inside the match case, before calling the rsx! macro, and modify the child component to instead accept Signals:

#[component]
fn WeatherElement(weather: Signal<Vec<String>>) -> Element {
    rsx! { p { "The weather is {weather:#?}" } }
}

...

match &*current_weather.read_unchecked() {
    Some(Ok(weather)) => {
        let weather = use_signal(|| weather.clone());
        rsx! { WeatherElement { weather } }
    },
    Some(Err(e)) => rsx! { p { "Loading weather failed, {e}" } },
    None =>  rsx! { p { "Loading..." } }
}

The advantage of this option is that you can still pass parameters to components in the short form, and that you don't have to clone the value each time, even in child components. However, Adding an additional block inside the match case before the rsx! macro doesn't seem so nice, and adds an additional level of indentation. Also, I'm not sure if it follows the rules of hooks, so if the order of hooks is always the same. I'm currently using this in my project and it seems to work, but hooks aren't very complex.

The third option is to create signals directly inside use_resource:

  let current_weather: Resource<Result<_, String>> = use_resource(move || async move {
      let weather = get_weather(&country()).await?;
      Ok(use_signal(|| weather))
  });

  rsx! {
      match &*current_weather.read_unchecked() {
          Some(Ok(weather)) => rsx! { WeatherElement { weather: *weather } },
          Some(Err(e)) => rsx! { p { "Loading weather failed, {e}" } },
          None =>  rsx! { p { "Loading..." } }
      }
  }

This option looks quite nice to use, apart from having to dereference the parameter before passing it to the component, which makes component calls longer. However, it probably violates the rules of hooks, as use_signal is created inside the initialization closure of use_resource. But in this simple example, it works fine.

Are there any better options for passing values to child components? If not, I have some ideas how maybe this could be implemented.

The most intuitive way would be to just use references to these values in child components. However, Dioxus components can't accept references, and I don't known if this can be easily supported without drastically changing how Dioxus works.

Another idea could be to have a use_resource-like hook (or an option to the existing use_resource that wraps the response in Signal, like in the third option, but ensuring the order of hooks is always correct. Since changing the value doesn't really make sense, as it's dynamically obtained in use_resource, it should probably be some kind of read-only Signal-like structure, which just ensures the internal reference lives long enough and handles resctivity when use_resource changes.

A related idea is to change the rsx! parser to allow (de)referencing component parameters in the short form, so things like this would be possible:

rsx! { WeatherElement { &weather } }
rsx! { WeatherElement { *weather } }

Or, maybe this could even be implicit, like it already seems to be the case with &String.

[ealmloff]

Currently, cloning is the best way to do this. If you want to make the value copy inside of the child component you can make it accept ReadOnlySignal<T> and pass the cloned T as props into the component. Dioxus will convert from T automatically. You shouldn't call hooks inside of other initialization closures or create Signals dynamically

I've been experimenting with better apis for mapping readable values in #4413 which could make this nicer. One version of this we could support in the future is making Resource act more like a store which wouldn't require cloning the value (although it does currently require some ugly wrapper types):

use dioxus::prelude::{
    dioxus_stores::{use_store, Store},
    *,
};
use std::num::ParseIntError;

fn main() {
    dioxus::launch(app);
}

fn app() -> Element {
    let result = use_store(|| {
        "0".parse::<u32>()
            .map(|data| TodoState { data })
            .map_err(|error| ParseError { error })
    });
    match result.as_result() {
        Ok(data) => {
            rsx! {
                HandleOk { data }
            }
        }
        Err(error) => {
            rsx! {
                HandleError { error }
            }
        }
    }
}

#[component]
fn HandleError(error: Store<ParseError>) -> Element {
    rsx! {
        h1 { "Error parsing number" }
        p { "An error occurred while parsing the number: {error.error()}" }
    }
}

#[component]
fn HandleOk(data: Store<TodoState>) -> Element {
    rsx! {
        h1 { "Parsed number successfully" }
        p { "The parsed number is: {data.data()}" }
    }
}

#[derive(Store)]
struct TodoState {
    #[store(foreign)]
    data: u32,
}

#[derive(Store)]
struct ParseError {
    #[store(foreign)]
    error: ParseIntError,
}

[filips123]

Currently, cloning is the best way to do this. If you want to make the value copy inside of the child component you can make it accept ReadOnlySignal<T> and pass the cloned T as props into the component. Dioxus will convert from T automatically.

So, currently, if the value is used inside multiple child components, it needs to be cloned for each of them? Is it possible to somehow manually construct ReadOnlySignal<T> once in the root component, and then pass it to child components?

Also, is the code inside read_unchecked() match considered dynamic, so is it allowed to use use_signal there (like in my second option above)? Or maybe use_memo, as it kinda seems to be more appropriate to "derive state from any tracked value" (although use_memo doesn't even compile in this case).

[ealmloff]

Yes, the match is dynamic since it doesn't always run the same branch. You could create a wrapper component that accepts ReadOnlySignal and pass on that ReadOnlySignal to other components without cloning

[filips123]

Thanks, that looks like a good solution for now. In the future, it would be nice if Dioxus could automatically wrap use_resource into some ReadOnlySignal-like structure to make this easier.

However, I encountered an interesting problem with a wrapper component approach. My types are quite long, so I wanted to use type aliases, so I don't have to repeat them everywhere. But this breaks automatic conversion for some reason.

For example, the following code works fine:

use dioxus::prelude::*;

#[derive(Clone)]
struct WeatherLocation {
    city: String,
    country: String,
    coordinates: (f64, f64),
}

async fn get_weather(location: &WeatherLocation) -> Result<Vec<String>, String> {
    Ok(vec!["Sunny".to_string()])
}

#[component]
fn WeatherElement(weather: ReadOnlySignal<Vec<String>>) -> Element {
    rsx! { p { "The weather is {weather:#?}" } }
}

fn app() -> Element {
    let country = use_signal(|| WeatherLocation {
        city: "Berlin".to_string(),
        country: "Germany".to_string(),
        coordinates: (52.5244, 13.4105),
    });

    let current_weather: Resource<Result<_, String>> = use_resource(move || async move {
        let weather = get_weather(&country()).await?;
        Ok(weather)
    });

    rsx! {
        match &*current_weather.read_unchecked() {
            Some(Ok(weather)) => rsx! { WeatherElement { weather: weather.clone() } },
            Some(Err(e)) => rsx! { p { "Loading weather failed, {e}" } },
            None =>  rsx! { p { "Loading..." } }
        }
    }
}

fn main() {
    dioxus::LaunchBuilder::desktop().launch(app);
}

However, moving ReadOnlySignal<Vec<String>> into a type alias doesn't work:

use dioxus::prelude::*;

#[derive(Clone)]
struct WeatherLocation {
    city: String,
    country: String,
    coordinates: (f64, f64),
}

async fn get_weather(location: &WeatherLocation) -> Result<Vec<String>, String> {
    Ok(vec!["Sunny".to_string()])
}

pub type WeatherSignal = ReadOnlySignal<Vec<String>>;

#[component]
fn WeatherElement(weather: WeatherSignal) -> Element {
    rsx! { p { "The weather is {weather:#?}" } }
}

fn app() -> Element {
    let country = use_signal(|| WeatherLocation {
        city: "Berlin".to_string(),
        country: "Germany".to_string(),
        coordinates: (52.5244, 13.4105),
    });

    let current_weather: Resource<Result<_, String>> = use_resource(move || async move {
        let weather = get_weather(&country()).await?;
        Ok(weather)
    });

    rsx! {
        match &*current_weather.read_unchecked() {
            Some(Ok(weather)) => rsx! { WeatherElement { weather: weather.clone() } },
            Some(Err(e)) => rsx! { p { "Loading weather failed, {e}" } },
            None =>  rsx! { p { "Loading..." } }
        }
    }
}

fn main() {
    dioxus::LaunchBuilder::desktop().launch(app);
}

[cargo] error[E0308]: mismatched types
  --> src\main.rs:35:67
   |
35 |             Some(Ok(weather)) => rsx! { WeatherElement { weather: weather.clone() } },
   |                                                          -------  ^^^^^^^^^^^^^^^ expected `ReadOnlySignal<Vec<String>>`, found `Vec<String>`
   |                                                          |
   |                                                          arguments to this method are incorrect
   |
   = note: expected struct `dioxus::prelude::ReadOnlySignal<Vec<_>>`
              found struct `Vec<_>`
note: method defined here
  --> src\main.rs:17:19
   |
17 | fn WeatherElement(weather: WeatherSignal) -> Element {
   |                   ^^^^^^^---------------

I don't know if this is a problem with Dioxus or just how Rust's type system works.

[ealmloff]

The props macro doesn't have type information, so it just looks for the string ReadOnlySignal in the type path. I think #[props(into)] will do the same thing when the automatic conversion doesn't kick in

[filips123]

Yeah, adding #[props(into)] before the parameter worked, thanks!

#[component]
fn WeatherElement(#[props(into)] weather: WeatherSignal) -> Element {
    rsx! { p { "The weather is {weather:#?}" } }
}