Got frustrated with repetitive Supabase fetching syntax, so we built a minimal wrapper to fix it.
Hey everyone,
I’ve been using Supabase a ton lately for our projects, and while I absolutely love the ecosystem, I noticed our team was writing the exact same boilerplate code over and over just to handle simple data fetching, updates, and deletes.
Typing out .from('table').select('*').eq('id', id) across dozens of components started to feel heavily repetitive.
To clean up our codebase and speed up our workflow, we built a lightweight, zero-boilerplate wrapper called @/keylabsdev/superbase. It initializes just like the native client but exposes a super clean, fluent syntax that implicitly handles the structural boilerplate for you.
Here is a quick look at the syntax difference:
// ❌ The Repetitive Way
const { data, error } = await supabase
.from('tasks')
.select('*')
.eq('status', 'done')
.limit(5);
// The Superbase Way
const data = await db.from('tasks').eq('status', 'done').limit(5);
What it does:
- Implicit Selecting:
.from('table')automatically defaults to selecting all columns (*) so you can jump straight into filtering. You can still pass custom columns as a second argument if needed (db.from('tasks', 'id, title')). - Chainable Filters: It preserves and mirrors all native PostgREST filters (
.eq(),.gt(),.ilike(),.order(), etc.). - Clean Mutations: One-liners for common actions:
await db.update('tasks', { status: 'done' }).eq('id', 5); - TypeScript-First: It's fully typed and compiled to work seamlessly with your existing build tools.
It’s completely open-source and free to use. If you want to check it out, grab the code, or drop some feedback, you can find it here:
👉 NPM: npm install @/keylabsdev/superbase
👉 GitHub: https://github.com/KeyLab-Git/keylabs-superbase
Would love to know if anyone else runs into this syntax fatigue, and what other shorthand methods you’d want to see added to it!