Writing and Reading Data: Supabase CRUD Operations

The Supabase JS client SDK provides a fluent query syntax that closely maps to standard SQL queries. Let us review the primary CRUD methods.

1. Querying Records (Read)

To fetch data rows from a target table, call the .from() and .select() query builders:

import { supabase } from "../lib/supabase";

// Fetch all columns from the products table
const { data, error } = await supabase
  .from("products")
  .select("*");

To limit the returned columns and save network bandwidth, specify the field names as a comma-separated string inside the select argument:

// Fetch only the id and title fields
const { data, error } = await supabase
  .from("products")
  .select("id, name");

2. Inserting Records (Create)

To insert rows, pass a payload object (or an array of payload objects) to the .insert() method:

const { data, error } = await supabase
  .from("products")
  .insert([
    { name: "Vintage Desk Lamp", price: 49.99, stock: 12 },
    { name: "Ergonomic Office Chair", price: 189.50, stock: 5 },
  ]);

3. Modifying Records (Update)

To modify existing records, use .update() combined with a filter method (like .eq()) to specify which rows to target:

const { data, error } = await supabase
  .from("products")
  .update({ price: 159.99 })
  .eq("id", 42); // Target product with ID 42

4. Deleting Records (Delete)

To delete rows, use the .delete() method combined with a target filter:

const { data, error } = await supabase
  .from("products")
  .delete()
  .eq("stock", 0); // Delete all products out of stock