How to pull an api endpoint without parameters?

[MTRNord]

Hi, the hackernews and other api examples use https://docs.rs/leptos_reactive/0.1.0/leptos_reactive/fn.create_resource.html for fetching data. However, this strictly requires some input variable. In my case, I just have an api which takes no values. It simply needs to be called. How would I do this?

Just giving an empty function as the source makes it never run, and Suspense always goes to the error case.

So I assume I am clearly missing something here. I even tried cursed things like this:

pub fn HomePage(cx: Scope) -> impl IntoView {
    let (pending, set_pending) = create_signal(cx, true);
    let graph = create_resource(cx, pending, move |pending| async move {
        if pending {
            let resp = api::fetch_api::<Vec<String>>(cx, &api::graph()).await;
            set_pending(false);
            resp
        } else {
            None
        }
    });

    view! { cx,
        <main class="my-0 mx-auto max-w-3xl text-center">
            <h1 class="p-6 text-4xl">"Welcome to the Knowledge!"</h1>
            <Suspense fallback=|| view! { cx, "Loading..." }>
                    {move || graph.read().map(|graph| match graph {
                        None => view! { cx,  <div class="item-view">"Error loading the Graph."</div> },
                        Some(graph) => view! { cx,
                            <div>
                                {graph}
                                <p>{"Graph loaded"}</p>
                            </div>
                    }})
                }
            </Suspense>

        </main>
    }
}

But to my surprise, the api is never being called in this case.

[gbj]

This is surprising: something like a simple || () should work as the trigger if it never needs to change.

Without access to your API, I'm not sure what's going on. I ran a simple test like this, where I just return Some(true) from the resource, and it seems to work fine.

#[component]
pub fn HomePage(cx: Scope) -> impl IntoView {
    let graph = create_resource(cx, || (), move |_| async move { Some(true) });

    view! { cx,
        <main class="my-0 mx-auto max-w-3xl text-center">
            <h1 class="p-6 text-4xl">"Welcome to the Knowledge!"</h1>
            <Suspense fallback=|| view! { cx, "Loading..." }>
                    {move || graph.read().map(|graph| match graph {
                        None => view! { cx,  <div class="item-view">"Error loading the Graph."</div> },
                        Some(graph) => view! { cx,
                            <div>
                                <p>{"Graph loaded"}</p>
                            </div>
                    }})
                }
            </Suspense>

        </main>
    }
}

[MTRNord]

Hm I had only tried || {} maybe that is different. The api is so far just a placeholder get endpoint on the axum server that also runs the ssr of the page. Nothing special there.

I will try it like you did instead. :)

[MTRNord]

Ok it seems to work now. Only issue seems now to be that on ssr I obviously cannot do relative paths for fetching :) but I will figure that out

[floric]

I was wondering exactly the same and came later to the same solution (move || ()). But in my case, I like to the fetch the resource only as part of a onClick handler and not during page load. Am I missing a critical concept part on how reactive programming works here? Maybe I need a dummy signal, initialized with a dummy value, to trigger the fetch upon change?

Something like this, except the refetch should be a fetch instead:

#[component]
pub fn Test(cx: Scope) -> impl IntoView {
    let result = create_local_resource(cx, move || (), |_| post_test_alert());
    let on_send = move |_| {
        result.refetch();
    };

    view! { cx,
        <div class="page">
            <button on:click=on_send>"Send"</button>
        </div>
    }
}

[floric]

Ah, I already found the solution myself :) I simply needed create_action instead 😃

let result = create_action(cx, |_| post_test_alert());
let on_send = move |_| {
    result.dispatch(());
};

@gbj maybe we should extend the docs to reference create_action inside the docs of create_resource and its siblings, as already done in create_action vice versa? I was confused because the last part of the following sentence sounded like a perfect fit. :)

Creates Resource, which is a signal that reflects the current state of an asynchronous task, allowing you to integrate async [Future]s into the synchronous reactive system.

[gbj]

Great idea! create_resource came first and create_action later, and I never updated the docs of create_resource to match, clearly.