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) 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. Installation npm install @cloudbase/js-sdk Initialization pattern (canonical) 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 // 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 ( ) ; // 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) // 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 // 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.