dioxus-query 🦀⚡

Fully-typed, async, reusable cached state managementforDioxus 🧬.Inspired byTanStack Query.

See theDocsor join theDiscord.

⚠️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)]
enumQueryKey{
User(usize),
}

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

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

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

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

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

fnapp()->Element{
use_init_query_client::<QueryValue,QueryError,QueryKey>();
letclient =use_query_client::<QueryValue,QueryError,QueryKey>();

letonclick =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