relational-database-web_skill

Overview

This skill provides the canonical frontend initialization and usage pattern for CloudBase Relational Database via @cloudbase/js-sdk. It standardizes a single shared db client for browser apps so you can run Supabase-style queries directly from React, Vue, or vanilla JS. Use it to safely replace or emulate a Supabase client on the web while avoiding common SDK initialization pitfalls.

How this skill works

The skill initializes CloudBase synchronously with cloudbase.init({ env }) and exposes the relational DB client via app.rdb(). It enforces a single shared db instance that the app imports wherever queries are needed. Once db = app.rdb() is available, you use the same query methods and shapes as Supabase (from, select, insert, update, delete).

When to use it

• Building a frontend web app (React, Vue, vanilla JS) that queries CloudBase Relational Database from the browser
• Replacing an existing Supabase client with CloudBase while keeping the same query patterns
• Sharing a single db client across components to avoid repeated initialization and runtime errors
• When you need simple Supabase-style CRUD queries in the browser without backend changes
• When you must follow a strict, synchronous initialization pattern for stability

Best practices

• Always initialize synchronously with cloudbase.init({ env: "your-env-id" }) and never lazy-import or wrap initialization in async helpers
• Create one shared db client (export const db = app.rdb()) and import it across the app — do not re-initialize
• Do not add or change properties on the cloudbase.init options object; only replace env as needed
• Call app.rdb() to get the database client; app itself is not a DB client
• Handle authentication separately using the Web Auth skill or your auth flow; this skill focuses on DB init and queries

Example use cases

• Shared lib/db.js that exports db for a React app and powers hooks like usePosts
• Swap out a Supabase client in a migration: keep the same query code but point it at CloudBase via app.rdb()
• Perform standard CRUD operations from the browser: .from('posts').select(), .insert(), .update(), .delete()
• Fetch ordered lists and single records using Supabase-style query chaining in page components
• Small static sites that need client-side database access without a custom backend