#surrealdb #yew #front-end #surreal #db #authentication #component

syewreal

直接将您的 Yew 前端连接到您的 Surreal DB

1 个不稳定版本

0.2.0 2024 年 3 月 18 日

#1433网页编程

MIT/Apache

43KB
892

用法

创建连接

要连接到数据库,请使用 use_surreal_login 钩子。钩子返回一个令牌,该令牌必须在 <SurrealContext/> 上下文提供者中使用。

#[function_component]
fn MyComponent(props: &P) -> Html{
    let login = Database {
        username: "user",
        password: "user",
        database: "test",
        namespace: "test"
    };
    
    let token = use_surreal_login("localhost:8000".to_owned(), login);

    
    html! {
        <SurrealContext token={token}>
            // Your App goes here
        </SurrealContext>
    }
}

<SurrealContext/> 将挂起您的应用程序,直到登录成功。

查询组件

<Query/> 组件将检索所有与给定查询匹配的数据库条目,并依次显示它们

html! {
    <SurrealContext token={token}>
        <Query<Inner> selector="select * from myTable"/>
    </SurrealContext>
}

<Query<T>/> 有四个属性

  • selector:可以转换为 SelectStatement 的内容,包括 String 和 surreal 记录(surreal 源代码中的 Thing
  • parameters(可选):一个 (String, String) 元组 Vec,它将被绑定到查询
  • filter(可选):用于本地过滤的 yew 回调 Fn(T::Properties) -> bool
  • fallback(可选):在数据正在获取时渲染的 Html 元素(在底层使用 yew 挂起)。

<Query/> 将查询结果存储在内部管理的状态中。如果您想操作状态或在不同位置使用相同的查询结果,您必须结合使用 <QueryWithState/>use_query_state 钩子

let list_state = use_query_state::<ToDoItemProps>("SELECT * FROM item");
html!{
    <QueryWithState<ToDoItem> state={list_state}/>
}

由于状态是外部管理的,所以 <QueryWithState/> 组件没有 selectorparameters 字段。

属性

为了让组件 <Inner/><Query/> 渲染,Inner::Properties 需要继承 SurrealProps(除了 PropertiesPartialEqClone

#[derive(SurrealProps, Properties, PartialEq, Clone)]
struct InnerProps {
    #[id] id: Option<ID>,
    name: AttrValue,
}


#[function_component]
fn Inner(props: &InnerProps) -> Html{
    // You know what to do here
}

组件的 id 属性可以是 IDOption<ID>,如果您想从组件创建新的数据库条目,应选择 Option<ID>,这样您可以将新条目的 id 设置为 None

本地属性

要添加可以本地设置而不是从服务器检索的属性,请将它们标记为 #[local]

#[derive(SurrealProps, Properties, PartialEq, Clone)]
struct InnerProps {
    id: AttrValue,
    name: AttrValue,
    #[local]
    color: AttrValue
}

它们需要在包装组件上设置,并应用于所有 Inner 组件

<SurrealList<Inner> selector="select * from myTable" color="red"/>

外键

处理外键有两种方式

A) 使用类型为 ForeignKey 的属性(这只是 ID 的别名,但更易读)

B) 使用类型为 StaticChild<T> 的属性,其中 T 是可反序列化的结构体。这允许使用 FETCH 关键字一次性检索数据,但在更新/创建时只会将检索到的数据的 id 写入 surreal。

"原始" 数据库访问

您可以使用 use_surreal() 钩子来替代直接使用 <Query/> 渲染组件

  • select:使用 Selector 从 surreal 获取任意数据
  • update:更新组件的底层数据(本地和远程)。这始终使用 MERGE 模式,因为无法保证本地结构体包含远程表的全部字段。
  • create:创建新的数据库条目,并使用方便的方法将新条目存储在本地
  • query:执行任意 SQL 查询并将结果存储
use_surreal().create(
    "item".to_owned(),
    ToDoItemPropsRemote {
        done: false,
        // Note how having the type of id be Option<ID> 
        // enables you to delegate id creation to the Database
        id: None,
        text: None,
        title: "Test".into(),
        img: None
    },
).execute();

自引用

use_surreal().update() 方法接受一个 SurrealSelfRef 作为其参数,这可以通过在组件内部使用钩子 use_self_ref() 获取。

当执行更新时,如果新数据仍然与原始选择器匹配,则将使用从数据库返回的数据替换组件的属性,否则将丢弃本地存储中的数据。

注意:强烈建议在创建自动更新的组件时使用 use_update_callback 钩子。

依赖关系

~67MB
~1M SLoC