#dioxus #state #synchronization #async #cache

dioxus-query

Fully-typed, async, reusable cached state management for Dioxus 🧬

9 unstable releases (4 breaking)

0.5.1 Jun 23, 2024
0.5.0 Jun 22, 2024
0.4.0 Dec 16, 2023
0.3.2 Sep 10, 2023
0.1.1 Aug 5, 2023

#500 in GUI

Download history 52/week @ 2024-07-29 33/week @ 2024-08-05 77/week @ 2024-08-12 19/week @ 2024-08-19 40/week @ 2024-08-26 60/week @ 2024-09-02 94/week @ 2024-09-09 54/week @ 2024-09-16 108/week @ 2024-09-23 93/week @ 2024-09-30 70/week @ 2024-10-07 59/week @ 2024-10-14 5/week @ 2024-10-21 5/week @ 2024-10-28 29/week @ 2024-11-04

121 downloads per month

MIT license

37KB
632 lines

Discord Server

dioxus-query 🦀⚡

Fully-typed, async, reusable cached state management for Dioxus 🧬. Inspired by TanStack Query.

See the Docs or join the Discord.

⚠️ Work in progress ⚠️

Support

  • Dioxus v0.5 🧬
  • All renderers (web, desktop, freya, etc)
  • Both WASM and native targets

Installation

Install the latest release:

cargo add dioxus-query

Example

cargo run --example simple

Usage

#[derive(Clone, PartialEq, Eq, Hash)]
enum QueryKey {
    User(usize),
}

#[derive(Debug)]
enum QueryError {
    UserNotFound(usize),
    Unknown
}

#[derive(PartialEq, Debug)]
enum QueryValue {
    UserName(String),
}

async fn fetch_user(keys: Vec<QueryKey>) -> QueryResult<QueryValue, QueryError> {
    if let Some(QueryKey::User(id)) = keys.first() {
        println!("Fetching user {id}");
        sleep(Duration::from_millis(1000)).await;
        match id {
            0 => Ok(QueryValue::UserName("Marc".to_string())),
            _ => Err(QueryError::UserNotFound(*id)),
        }
        .into()
    } else {
        QueryResult::Err(QueryError::Unknown)
    }
}

#[allow(non_snake_case)]
#[component]
fn User(id: usize) -> Element {
   let value = use_get_query([QueryKey::User(id)], fetch_user);

    rsx!( p { "{value.result().value():?}" } )
}

fn app() -> Element {
    use_init_query_client::<QueryValue, QueryError, QueryKey>();
    let client = use_query_client::<QueryValue, QueryError, QueryKey>();

    let onclick = move |_| {
         client.invalidate_query(QueryKey::User(0));
    };

    rsx!(
        User { id: 0 }
        button { onclick, label { "Refresh" } }
    )
}

Features

  • Renderer-agnostic
  • Queries and mutations
  • Typed Mutations, Query keys, Errors and Values
  • Invalidate queries manually
  • Invalidate queries when keys change
  • Concurrent and batching of queries
  • Concurrent mutations

To Do

  • Tests
  • Documentation
  • Real-world examples

MIT License

Dependencies

~4–11MB
~123K SLoC