Async graphql for Leptos?

[Dindaleon]

I am new to Rust (a month or so in), but loving it! I am currently developing an api with graphql for my own project. I was wondering if I can use the crate Async-Graphql with leptos? If so, has anyone written a tutorial/guide or something?

I was thinking about using svelte for my front-end, but now I am more leaning towards Leptos.

[gbj]

So, I've never used async_graphql, but it looks like it's a server-side library allowing you to define a GraphQL API and run it on your server. That means it doesn't have much to do with Leptos one way or another, which is mostly for writing the UI/frontend code and has its own form of client/server RPC with #[server] functions.

You could use async_graphql to create a GraphQL API for your backend and consume it from your Leptos app, for sure, but I don't think Leptos and async_graphql would interact with one another, per se.

[allurefx]

As it happens, I'm just starting my project to re-do an app with all rust (front/back ends) and switching to GraphQL in place of GRPC in the process. I started with Leptos a couple of days back for the frontend and have just (as of today) succeeded in setting the basic plumbing for the GraphQL connection.

Basically, I'm using async-graphql and async-graphql-axum (I'm using Axum, but there are extensions for other frameworks on the async-graphql GitHub page). On the client side, I added graphql_client and graphql_query_derive (for helper code). The GraphQL part itself is straightforward, but the biggest problem I've had so far was with using Leptos to make the async calls.

1. There is a "create_resource" in Leptos that lets you use a signal to trigger an async call, but I was not able to get the result of the async call: using their "with" returned the errors correctly, but not the success. This may be user error or a Leptos bug, will explore and log an issue if I think it's a bug.
2. However, using the wasm_bindgen_futures::spawn_local (wasm-bindgen-futures crate) to make the async call worked, see below for a working code. This is a super simple plumbing setup where the GraphQL query is to make a login call with a phone number and a password and returning a token string. Let me know if you have questions, hope I can help you avoid wasting the time that I went through.

use graphql_client::GraphQLQuery;
use leptos::*;
use reqwest::{Client, StatusCode};

#[derive(GraphQLQuery)]
#[graphql(
    schema_path = "../etc/graphql/schema.graphql",
    query_path = "../etc/graphql/login.graphql"
)]
struct LoginQuery;

#[component]
pub fn Login(cx: Scope, login: RwSignal<bool>) -> impl IntoView {
    let phone = create_rw_signal(cx, "".to_string());
    let password = create_rw_signal(cx, "".to_string());
    async fn login_call(phone: String, password: String) -> Result<String, String> {
        let query = LoginQuery::build_query(login_query::Variables { phone, password });
        let client = Client::new();
        let res = client
            .post("http://localhost:8000/graphql")
            .json(&query)
            .send()
            .await
            .map_err(|e| e.to_string())?;
        if res.status() != StatusCode::OK {
            return Err(format!("status: {}", res.status()));
        }
        let res = res
            .json::<graphql_client::Response<login_query::ResponseData>>()
            .await
            .map_err(|e| e.to_string())?
            .data
            .ok_or("no data".to_string())?
            .login
            .ok_or("no login".to_string());
        res
    }
    view! {cx,
        <div class="login">
            <input type="text" placeholder="Phone" on:change=move |e| phone.set(event_target_value(&e))/>
            <input type="password" placeholder="Password" on:change=move |e| password.set(event_target_value(&e))/>
            <button on:click=move |_| {
                wasm_bindgen_futures::spawn_local(async move {
                    let res = login_call(phone.get(), password.get()).await;
                    match res {
                        Ok(_) => login.set(true),
                        Err(e) => log::error!("login error: {}", e),
                    }
                });
            }>"Login"</button>
        </div>
    }
}

[gbj]

You may also find the create_action function useful. Think: create_resource is for loading and reloading async data (either once or in response to a changing signal) and integrating it into the reactive system — create_action is for what you're doing manually here (occasionally calling an async function). But your manual version works too!

[allurefx]

Yeah, I did look at create_action, but didn't see a way to get the result directly like I can with wasm_bindgen_futures above. I.e., the only way I saw was to create a signal from the value of the action and act on that, like with an effect. That seems a bit convoluted, please let me know if I'm missing something here. Below are the two variations, as an example.

Using wasm_bindgen_futures

fn main() {
    wasm_logger::init(wasm_logger::Config::default());
    async fn foo(arg: u32) -> Result<u32, String> {
        Ok(arg)
    }
    mount_to_body(|cx| {
        view! {cx,
            <button on:click=move |_| {
                wasm_bindgen_futures::spawn_local(async move {
                    let result = foo(1).await;
                    log::info!("result: {:?}", result);
                });
            }>"Test"</button>
        }
    });
}

Using create_action

fn main() {
    wasm_logger::init(wasm_logger::Config::default());
    async fn foo(arg: u32) -> Result<u32, String> {
        Ok(arg)
    }
    mount_to_body(|cx| {
        let foo_action = create_action(cx, |arg| foo(*arg));
        create_effect(cx, move |_| {
            if let Some(result) = foo_action.value.get() {
                log::info!("result = {:?}", result);
            }
        });
        view! {cx,
            <button on:click=move |_| {
                foo_action.dispatch(1);
            }>"Test"</button>
        }
    });
}

If this is the way it works now in Leptos, perhaps you can consider supporting the direct approach via an API or at least document the use of directly calling using the wasm_bindgen_futures::spawn_local(). Sycamore evidently does that (see https://docs.rs/sycamore/latest/sycamore/futures/index.html).

[gbj]

I'd put it this way: if you need to access the result of the async function reactively, somewhere else in your component or in the view, create_action and the value signal is the best way to do it (rather than creating a signal and writing to it within the event listener). If you need to await the value of the async function inside the event listener, then the way you're doing it is definitely best. You can save yourself the wasm_bindgen_futures import: Leptos provides a spawn_local function, which (in the browser) just wraps it.