DioxusLabs / DioxusLabs/dioxus
Lazy loading in https://dioxuslabs.com/learn/0.6/guide/data_fetching may not be working
- Dominant language
- Rust
- Stars
- 39.1k
- Forks
- 1.9k
- Avg merge
- 4d 10h
- Merged PRs (30d)
- 4
Description
**Problem**
I tried the code for lazy loading in `https://dioxuslabs.com/learn/0.6/guide/data_fetching` resulting in 2 issues:
- `onmouseenter` and `onfocus` are not expecting a Future
- id cannot be moved into the closures
**Steps To Reproduce**
Steps to reproduce the behavior:
- Paste full code into a project and run it
**Expected behavior**
------
**Screenshots**
------
**Environment:**
- Dioxus version: 0.6.0
- Rust version: 1.81.0
- OS info: Win11
- App platform:
**Questionnaire**
I use this workaround, but am not 100% if this fits "rules of hook":
```rust
async fn resolve_story(
mut full_story: Signal>,
mut preview_state: Signal,
story_id: i64,
) {
if let Some(cached) = full_story.as_ref() {
*preview_state.write() = PreviewState::Loaded(cached.clone());
return;
}
*preview_state.write() = PreviewState::Loading;
if let Ok(story) = service::get_story(story_id).await {
*preview_state.write() = PreviewState::Loaded(story.clone());
*full_story.write() = Some(story);
}
}
#[component]
pub fn StoryListing(story: ReadOnlySignal) -> Element {
let preview_state = consume_context::>();
// let mut preview_state = use_context::>();
let StoryItem {
title,
url,
by,
score,
time,
kids,
id,
..
} = &*story.read();
let full_story = use_signal(|| None);
let url = url.as_deref().unwrap_or_default();
let hostname = url
.trim_start_matches("https://")
.trim_start_matches("http://")
.trim_start_matches("www.");
let score = format!("{score} {}", if *score == 1 { " point" } else { " points" });
let comments = format!(
"{} {}",
kids.len(),
if kids.len() == 1 {
" comment"
} else {
" comments"
}
);
let time = time.format("%D %l:%M %p");
rsx! {
div {
padding: "0.5rem",
position: "relative",
onmouseenter: {
let id = id.clone();
move |_event| {
let _resource = use_resource({
let id = id.clone();
move || resolve_story(full_story, preview_state, id)
});
}
},
div { font_size: "1.5rem",
a {
href: url,
onfocus: {
let id = id.clone();
move |_event| {
let _resource = use_resource({
let id = id.clone();
move || resolve_story(full_story, preview_state, id)
});
}
},
"{title}"
}
a {
color: "gray",
href: "https://news.ycombinator.com/from?site={hostname}",
text_decoration: "none",
" ({hostname})"
}
}
div { display: "flex", flex_direction: "row", color: "gray",
div { "{score}" }
div { padding_left: "0.5rem", "by {by}" }
div { padding_left: "0.5rem", "{time}" }
div { padding_left: "0.5rem", "{comments}" }
}
}
}
}
```
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.