DioxusLabs / DioxusLabs/dioxus

Lazy loading in https://dioxuslabs.com/learn/0.6/guide/data_fetching may not be working

Open
#3,412 0 comments 0 reactions 0 assignees View on GitHub
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.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.