relational-database-web-cloudbase

## 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) ## How to use this skill (for a coding agent) 1. **Confirm environment** - Ask the user for: - `env` – CloudBase environment ID 2. **Follow the initialization pattern in this file exactly** - Only change values like `env`, never the object shape. 3. **After initialization, use Supabase knowledge for queries** - Treat `db` as a Supabase client – method names and patterns are identical. 4. **Avoid re-initializing CloudBase** - Create a single shared `db` client and reuse it across components. --- ## Installation ```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. --- ## Scenario 1: Replace Supabase client in a React app ```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 }; } ``` --- ## Scenario 2: Basic query pattern (Supabase-style) ```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); } ``` --- ## Scenario 3: Insert / update / delete rows ```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); ``` --- ## Key principle: CloudBase Relational Database = 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.