Debouncing API requests

[tiberiusferreira]

Hello, thanks again for Leptos!

I need to fetch data from an API. The fetching is done based on a bunch of user inputs.

I don't want to have more than one request in flight at a given moment as to not flood the server.

I also don't want the UI to be stale, so, if by the time the current API fetching is done, the user input has changed, I want to re-trigger the fetching.

Currently I'm storing a reference of the resource using store_value and using it inside the resource fetcher (feels like a self reference, which is normally cursed in Rust :D, but works with Leptos due to the context magic ) . This feels a bit hacky and clunky.

I wonder if there is a better alternative.

#[derive(Clone)]
enum RequestState {
    Idle,
    Running,
    RunningBehind,
}

let task_ref: StoredValue<Option<leptos::Resource<SearchFor, ()>>> = store_value(cx, None);
 let api_request_sender = create_local_resource(cx, move || (search_data.get()), {
        move |search_for: SearchFor| async move {
            if let RequestState::Running | RequestState::RunningBehind =
                grid_data_request_running.get_value()
            {
                log!("Already running, setting as delayed");
                grid_data_request_running.set_value(RequestState::RunningBehind);
                return;
            }
            log!("Was idle, setting as running");
            grid_data_request_running.set_value(RequestState::Running);
            get_grid_data(search_for, api_response_w).await;
            let state_before = grid_data_request_running.get_value();
            log!("Finished running");
            grid_data_request_running.set_value(RequestState::Idle);
            if let Some(task) = task_ref.get_value() {
                if let RequestState::RunningBehind = state_before {
                    log!("Was running behind, rerunning");
                    task.refetch();
                }
            }
        }
    });
task_ref.set_value(Some(api_request_sender));

[gbj]

Agreed it seems clunky and we should have a better way. This seems to me to be similar to #1124 in the sense that "resources should just hold their latest value." I don't know that I have a better answer here, but we're certainly looking for some!

[tiberiusferreira]

Thank you for the quick response and your thoughts.

It is indeed a similar issue to the one you linked.

I just want to say Leptos is awesome and I'm sure these quirks/minor inconveniences will be worked out.

Thanks again!

[nguiard]

Hi! I love leptos! I was wondering along these lines too, on a system that would intelligently handle requests, caching, request debouncing... Have you looked into tanstack-query (previously called react-query)? I found the way they do it is really pretty nice and ergonomic :). If leptos had something like that out of the box, it would be quite powerful.

[gbj]

Yes, a leptos-query would both be wonderful and a lot of work. It's definitely outside my capacity to do it but I'd be very happy to support anyone who's interested in porting something or creating a similar library. They've had a lot of success building solid-query so it should be very possible given the similar paradigm.