examples: fix error handling in fetch example (#870)

examples/fetch/Cargo.toml

@@ -8,13 +8,13 @@ codegen-units = 1
 lto = true
 
 [dependencies]
-anyhow = "1.0.58"
 leptos = { path = "../../leptos" }
-reqwasm = "0.5.0"
+reqwasm = "0.5"
 serde = { version = "1", features = ["derive"] }
 log = "0.4"
 console_log = "1"
-console_error_panic_hook = "0.1.7"
+console_error_panic_hook = "0.1"
+thiserror = "1"
 
 [dev-dependencies]
-wasm-bindgen-test = "0.3.0"
+wasm-bindgen-test = "0.3"

examples/fetch/src/lib.rs

@@ -1,38 +1,50 @@
-use anyhow::Result;
 use leptos::*;
 use serde::{Deserialize, Serialize};
+use thiserror::Error;
 
 #[derive(Clone, Debug, PartialEq, Eq, Serialize, Deserialize)]
 pub struct Cat {
     url: String,
 }
 
-async fn fetch_cats(count: u32) -> Result<Vec<String>> {
+#[derive(Error, Clone, Debug)]
+pub enum FetchError {
+    #[error("Please request more than zero cats.")]
+    NonZeroCats,
+    #[error("Error loading data from serving.")]
+    Request,
+    #[error("Error deserializaing cat data from request.")]
+    Json
+}
+
+async fn fetch_cats(count: u32) -> Result<Vec<String>, FetchError> {
     if count > 0 {
         // make the request
         let res = reqwasm::http::Request::get(&format!(
             "https://api.thecatapi.com/v1/images/search?limit={count}",
         ))
         .send()
-        .await?
+        .await
+        .map_err(|_| FetchError::Request)?
         // convert it to JSON
         .json::<Vec<Cat>>()
-        .await?
+        .await
+        .map_err(|_| FetchError::Json)?
         // extract the URL field for each cat
         .into_iter()
         .map(|cat| cat.url)
         .collect::<Vec<_>>();
         Ok(res)
     } else {
-        Ok(vec![])
+        Err(FetchError::NonZeroCats)
     }
 }
 
 pub fn fetch_example(cx: Scope) -> impl IntoView {
-    let (cat_count, set_cat_count) = create_signal::<u32>(cx, 1);
+    let (cat_count, set_cat_count) = create_signal::<u32>(cx, 0);
 
     // we use local_resource here because
-    // 1) anyhow::Result isn't serializable/deserializable
+    // 1) our error type isn't serializable/deserializable
     // 2) we're not doing server-side rendering in this example anyway
     //    (during SSR, create_resource will begin loading on the server and resolve on the client)
     let cats = create_local_resource(cx, cat_count, fetch_cats);
@@ -42,7 +54,7 @@ pub fn fetch_example(cx: Scope) -> impl IntoView {
             errors.with(|errors| {
                 errors
                     .iter()
-                    .map(|(_, e)| view! { cx, <li>{e.to_string()}</li>})
+                    .map(|(_, e)| view! { cx, <li>{e.to_string()}</li> })
                     .collect::<Vec<_>>()
             })
         };
@@ -60,11 +72,12 @@ pub fn fetch_example(cx: Scope) -> impl IntoView {
     // and by using the ErrorBoundary fallback to catch Err(_)
     // so we'll just implement our happy path and let the framework handle the rest
     let cats_view = move || {
-        cats.with(cx, |data| {
-            data.iter()
-                .flatten()
-                .map(|cat| view! { cx, <img src={cat}/> })
-                .collect::<Vec<_>>()
+        cats.read(cx).map(|data| {
+            data.map(|data| {
+                data.iter()
+                    .map(|s| view! { cx, <span>{s}</span> })
+                    .collect::<Vec<_>>()
+            })
         })
     };
 
@@ -72,8 +85,9 @@ pub fn fetch_example(cx: Scope) -> impl IntoView {
         <div>
             <label>
                 "How many cats would you like?"
-                <input type="number"
-                    prop:value={move || cat_count.get().to_string()}
+                <input
+                    type="number"
+                    prop:value=move || cat_count.get().to_string()
                     on:input=move |ev| {
                         let val = event_target_value(&ev).parse::<u32>().unwrap_or(0);
                         set_cat_count(val);
@@ -81,7 +95,9 @@ pub fn fetch_example(cx: Scope) -> impl IntoView {
                 />
             </label>
             <ErrorBoundary fallback>
-                <Transition fallback=move || view! { cx, <div>"Loading (Suspense Fallback)..."</div>}>
+                <Transition fallback=move || {
+                    view! { cx, <div>"Loading (Suspense Fallback)..."</div> }
+                }>
                     {cats_view}
                 </Transition>
             </ErrorBoundary>