relational-database-web-cloudbase

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

When to use this skill

何时使用此技能

Use this skill whenever you need to access CloudBase Relational Database from a browser app (React, Vue, vanilla JS) using

@cloudbase/js-sdk

Use it when you need to:

Initialize CloudBase Relational Database on the frontend
Replace an existing Supabase client with CloudBase Relational Database
Share a single
```
db
```
client across your Web app

Do NOT use this skill for:

Backend/Node access to CloudBase Relational Database (use
```
relation-database-skill
```
→
```
node-sdk/quickstart.md
```
)

MCP/agent database management (use

relation-database-skill

→

mcp-tools/mcp-guide.md

)

Auth flows (use the Web/Node/Auth skills instead)

当你需要使用

@cloudbase/js-sdk

从浏览器应用（React、Vue、原生JS）访问CloudBase关系型数据库时，即可使用此技能。

在以下场景中使用：

在前端初始化CloudBase关系型数据库
用CloudBase关系型数据库替换现有的Supabase客户端
在Web应用中共享单个
```
db
```
客户端

请勿在以下场景使用：

后端/Node环境访问CloudBase关系型数据库（请使用
```
relation-database-skill
```
→
```
node-sdk/quickstart.md
```
）

MCP/Agent数据库管理（请使用

relation-database-skill

→

mcp-tools/mcp-guide.md

）

认证流程（请使用Web/Node/Auth相关技能）

How to use this skill (for a coding agent)

如何使用此技能（面向编码Agent）

Confirm environment
- Ask the user for:
  - ```
  env
```
  – CloudBase environment ID
Follow the initialization pattern in this file exactly
- Only change values like
```
env
```
  , never the object shape.
After initialization, use Supabase knowledge for queries
- Treat
```
db
```
  as a Supabase client – method names and patterns are identical.
Avoid re-initializing CloudBase
- Create a single shared
```
db
```
  client and reuse it across components.

确认环境
- 向用户询问：
  - ```
  env
```
  – CloudBase环境ID
严格遵循此文件中的初始化模式
- 仅修改
```
env
```
  等值，切勿更改对象结构。
初始化完成后，使用Supabase知识进行查询
- 将
```
db
```
  视为Supabase客户端——方法名称和模式完全相同。
避免重复初始化CloudBase
- 创建单个共享的
```
db
```
  客户端，并在组件间复用。

Installation

安装

bash

npm install @cloudbase/js-sdk

bash

npm install @cloudbase/js-sdk

Initialization pattern (canonical)

标准初始化模式

javascript

import cloudbase from "@cloudbase/js-sdk";

const app = cloudbase.init({
  env: "your-env-id", // CloudBase environment ID
});

const auth = app.auth();
// Handle user authentication separately (Web Auth skill)

const db = app.rdb();
// Use db exactly like a Supabase client

Initialization rules (Web, @cloudbase/js-sdk):

Always use synchronous initialization with the pattern above
Do not lazy-load the SDK with
```
import("@cloudbase/js-sdk")
```
Do not wrap SDK initialization in async helpers such as
```
initCloudBase()
```
with internal
```
initPromise
```
caches
Create a single shared
```
db
```
client and reuse it instead of re-initializing

Rules:

Do not invent new properties on the
```
cloudbase.init
```
options.
Always call
```
app.rdb()
```
to get the database client;
```
app
```
is not the DB client.

javascript

import cloudbase from "@cloudbase/js-sdk";

const app = cloudbase.init({
  env: "your-env-id", // CloudBase环境ID
});

const auth = app.auth();
// 单独处理用户认证（请使用Web Auth技能）

const db = app.rdb();
// 完全按照Supabase客户端的方式使用db

初始化规则（Web环境，@cloudbase/js-sdk）：

始终使用上述模式进行同步初始化
请勿通过
```
import("@cloudbase/js-sdk")
```
懒加载SDK
请勿将SDK初始化包装在异步辅助函数中，例如带有内部
```
initPromise
```
缓存的
```
initCloudBase()
```
创建单个共享的
```
db
```
客户端并复用，避免重复初始化

规则：

请勿在
```
cloudbase.init
```
的配置中新增自定义属性。
始终调用
```
app.rdb()
```
获取数据库客户端；
```
app
```
不是数据库客户端。

Scenario 1: Replace Supabase client in a React app

场景1：在React应用中替换Supabase客户端

javascript

// lib/db.js (shared database client)
import cloudbase from "@cloudbase/js-sdk";

const app = cloudbase.init({
  env: "your-env-id",
});

export const db = app.rdb();

javascript

// hooks/usePosts.js
import { useEffect, useState } from "react";
import { db } from "../lib/db";

export function usePosts() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    async function fetchPosts() {
      const { data } = await db.from("posts").select("*");
      setPosts(data || []);
    }
    fetchPosts();
  }, []);

  return { posts };
}

javascript

// lib/db.js（共享数据库客户端）
import cloudbase from "@cloudbase/js-sdk";

const app = cloudbase.init({
  env: "your-env-id",
});

export const db = app.rdb();

javascript

// hooks/usePosts.js
import { useEffect, useState } from "react";
import { db } from "../lib/db";

export function usePosts() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    async function fetchPosts() {
      const { data } = await db.from("posts").select("*");
      setPosts(data || []);
    }
    fetchPosts();
  }, []);

  return { posts };
}

Scenario 2: Basic query pattern (Supabase-style)

场景2：基础查询模式（Supabase风格）

javascript

// Fetch latest posts
const { data, error } = await db
  .from("posts")
  .select("*")
  .order("created_at", { ascending: false });

if (error) {
  console.error("Failed to load posts", error.message);
}

javascript

// 获取最新帖子
const { data, error } = await db
  .from("posts")
  .select("*")
  .order("created_at", { ascending: false });

if (error) {
  console.error("Failed to load posts", error.message);
}

Scenario 3: Insert / update / delete rows

场景3：插入/更新/删除行

javascript

// Insert
await db.from("posts").insert({ title: "Hello" });

// Update
await db.from("posts").update({ title: "Updated" }).eq("id", 1);

// Delete
await db.from("posts").delete().eq("id", 1);

javascript

// 插入
await db.from("posts").insert({ title: "Hello" });

// 更新
await db.from("posts").update({ title: "Updated" }).eq("id", 1);

// 删除
await db.from("posts").delete().eq("id", 1);

Key principle: CloudBase Relational Database = Supabase API

核心原则：CloudBase关系型数据库 = Supabase API

After you have
```
db = app.rdb()
```
, use Supabase documentation and patterns for all queries.
This skill only standardizes Web initialization and client sharing.
Do not duplicate Supabase docs into this skill; rely on the model's built-in Supabase knowledge for query shapes and options.

当你获取到
```
db = app.rdb()
```
后，所有查询均使用Supabase文档和模式。
此技能仅标准化Web端初始化和客户端共享。
请勿将Supabase文档复制到此技能中；查询结构和配置依赖模型内置的Supabase知识。