Observing an issue in combination with SurrealDB

[124C41p]

I am observing an issue when querying a SurrealDB (sitting on top of the browsers IndexedDB) within a Leptos component. I don't know whether this is due to a Leptos bug, a SurrealDB bug, or whether I am just doing things in an unintended way. The issue can be reproduced with both Chrome and Firefox, but it only occurs when the app is compiled in debug mode. I hope you can help me shedding some light into this.

What my app does:

• Create a local resource opening a database asynchronously
• Handing the database over to a child component
• Create a local resource querying the database asynchronously
• Print the query result on the screen

What I observe:

At first glance, everything seems to work fine when I run trunk serve. The query result appears in the browser immediately. However, after about 20 seconds the app panics (only when compiled in debug mode!). The console shows a lengthy error message containing A transaction was dropped without being committed or cancelled.

How can I find out what is going on?

My minimal example app:

# cargo.toml

[package]
name = "lepdb"
version = "0.1.0"
edition = "2021"

[dependencies]
leptos = { version = "0.5.4", features = ["csr"] }
serde = { version = "1.0.193", features = ["derive"] }
surrealdb = { version = "1.0.1", features = ["kv-indxdb"] }

// main.rs

use leptos::{mount_to_body, *};
use serde::Deserialize;
use surrealdb::{
    engine::local::{Db, IndxDb},
    sql::Thing,
    Surreal,
};

#[derive(Clone, Debug, Deserialize)]
struct Record {
    id: Thing,
}

fn main() {
    mount_to_body(App);
}

#[component]
fn App() -> impl IntoView {
    let db_resource = create_local_resource(
        || (),
        |()| async {
            let db = Surreal::new::<IndxDb>("foo").await.ok()?;
            db.use_ns("bar").use_db("baz").await.ok()?;
            Some(db)
        },
    );

    move || {
        db_resource
            .get()
            .flatten()
            .map(|db| view! { <MyComponent db/> })
    }
}

#[component]
fn MyComponent(db: Surreal<Db>) -> impl IntoView {
    let record_resource = create_local_resource(
        || (),
        move |()| {
            let db = db.clone();
            async move {
                let mut result = db.query("CREATE abc").await.ok()?;
                let rec: Option<Record> = result.take(0).ok()?;
                rec
            }
        },
    );

    move || {
        record_resource
            .get()
            .flatten()
            .map(|rec| view! { <p> { format!("{:?}", rec.id) } </p> })
    }
}

[gbj]

I can't even get surrealdb to compile with that Cargo.toml, but get ring-related errors etc. I'm sure it would be possible to figure out but I don't want to sink a lot of time into it.

I guess I'll say: that error is coming from SurrealDB, given the text. What I see on the Leptos side is a very simple app that runs one async block once, and then, when that is finished, runs a second async block and renders the result. I can't imagine that the problem is on the Leptos side.

[124C41p]

This is strange. I can compile these exact files even on a different machine (after creating an index.html which I left out here; using trunk v0.18.0).

Anyway, thanks for your assessment! I will try to reproduce the error without Leptos.