CRUD operations with supabase-js

Introduction

CRUD means Create, Read, Update, and Delete data. Using supabase-js helps you do these actions easily with your database in a web app.

You want to add new user info to your app database.

You need to show a list of items from your database on a webpage.

You want to change details of a product in your database.

You need to remove old or wrong data from your database.

Syntax

Supabase

import { createClient } from '@supabase/supabase-js'

const supabase = createClient('your-supabase-url', 'your-anon-key')

// Create
const { data, error } = await supabase.from('table').insert([{ column: 'value' }])

// Read
const { data, error } = await supabase.from('table').select('*').eq('column', 'value')

// Update
const { data, error } = await supabase.from('table').update({ column: 'newValue' }).eq('id', 1)

// Delete
const { data, error } = await supabase.from('table').delete().eq('id', 1)

Use await because these operations are asynchronous (they take time to finish).

Always check error to handle problems.

Examples

This adds a new user named Anna who is 25 years old.

Supabase

const { data, error } = await supabase.from('users').insert([{ name: 'Anna', age: 25 }])

This gets all users who are 25 years old.

Supabase

const { data, error } = await supabase.from('users').select('*').eq('age', 25)

This changes Anna's age to 26.

Supabase

const { data, error } = await supabase.from('users').update({ age: 26 }).eq('name', 'Anna')

This deletes the user named Anna.

Supabase

const { data, error } = await supabase.from('users').delete().eq('name', 'Anna')

Sample Program

This program connects to Supabase, adds a task, reads tasks not done, updates a task to done, then deletes done tasks. It logs each step's result.

Supabase

import { createClient } from '@supabase/supabase-js'

const supabaseUrl = 'https://xyzcompany.supabase.co'
const supabaseKey = 'public-anonymous-key'
const supabase = createClient(supabaseUrl, supabaseKey)

async function runCRUD() {
  // Create
  let { data: insertData, error: insertError } = await supabase.from('tasks').insert([{ title: 'Learn Supabase', done: false }])
  if (insertError) return console.error('Insert error:', insertError)
  console.log('Inserted:', insertData)

  // Read
  let { data: readData, error: readError } = await supabase.from('tasks').select('*').eq('done', false)
  if (readError) return console.error('Read error:', readError)
  console.log('Tasks not done:', readData)

  // Update
  let { data: updateData, error: updateError } = await supabase.from('tasks').update({ done: true }).eq('title', 'Learn Supabase')
  if (updateError) return console.error('Update error:', updateError)
  console.log('Updated:', updateData)

  // Delete
  let { data: deleteData, error: deleteError } = await supabase.from('tasks').delete().eq('done', true).select('*')
  if (deleteError) return console.error('Delete error:', deleteError)
  console.log('Deleted:', deleteData)
}

runCRUD()

Important Notes

Replace supabaseUrl and supabaseKey with your real project values.

Supabase tables must exist before running these commands.

Use eq to filter rows by column values.

Summary

CRUD lets you manage data: add, get, change, and remove.

supabase-js makes these actions easy with simple commands.

Always handle errors to keep your app stable.