#yew #hook #api-request #api #asynchronous

yew-api-hook

Use asynchronous api requests in conjunction with yew's suspense feature

3 releases (breaking)

0.3.0 Jan 21, 2023
0.2.0 Jan 15, 2023
0.1.0 Jan 10, 2023

#1181 in WebAssembly

MIT license

20KB
397 lines

crates.io docs

Yew API Hook

Use asynchronous api requests in conjunction with yew's suspense feature

Usage

#[function_component]
fn App() -> Html {
    html! {
        <Suspense fallback={html! { {"Loading.."} }}>
            <AsyncComponent />
        </Suspense>
    }
}

#[function_component]
fn AsyncComponent() -> HtmlResult {
    let data = use_api(requests::Fetch { id: 0 })?;

    match data {
        Ok(json) => Ok(html! { {format!("{:#?}", json)} }),
        Err(_) => Ok(html! { {"An error occured"} })
    }
}

mod requests {
    use yew_api_hook::prelude::*;

    type ApiResult = anyhow::Result<serde_json::Value>;

    #[derive(Clone, Debug, PartialEq)]
    pub struct Fetch {
        pub id: u64
    }

    #[async_trait(?Send)]
    impl Request for Fetch {
        type Error = anyhow::Error;
        type Output = serde_json::Value;

        async fn run(&self) -> ApiResult {
            // Use your favorite http or whatever implementation
            get(format!("/entity/{}", self.id)).await
        }
    }
}

Dependencies

~12–20MB
~275K SLoC