CRUD operations with supabase-js - Step-by-Step Execution

Process Flow - CRUD operations with supabase-js

Initialize Supabase Client

↓

Create: Insert new record

↓

Read: Fetch records

↓

Update: Modify existing record

↓

Delete: Remove record

↓

End

This flow shows the four main steps of CRUD using supabase-js: create, read, update, and delete records in a database.

Execution Sample

Supabase

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

This code inserts a new user named Ana with age 25 into the 'users' table.

Process Table

Step	Operation	Query Sent	Result Data	Error
1	Initialize Client	supabase = createClient(url, key)	Client ready	None
2	Create	insert([{ name: 'Ana', age: 25 }])	[{ id: 1, name: 'Ana', age: 25 }]	None
3	Read	select('*').from('users')	[{ id: 1, name: 'Ana', age: 25 }]	None
4	Update	update({ age: 26 }).eq('id', 1)	[{ id: 1, name: 'Ana', age: 26 }]	None
5	Delete	delete().eq('id', 1)	[{ id: 1, name: 'Ana', age: 26 }]	None
6	Read After Delete	select('*').from('users')	[]	None

💡 All CRUD operations completed successfully with no errors.

Status Tracker

Variable	Start	After Create	After Update	After Delete
data	undefined	[{ id: 1, name: 'Ana', age: 25 }]	[{ id: 1, name: 'Ana', age: 26 }]	[]
error	undefined	null	null	null

Key Moments - 3 Insights

Why does the 'data' variable change after each operation?

Because each CRUD operation returns the current state of the affected records, as shown in the execution_table rows 2, 4, and 5.

What happens if there is an error during an operation?

The 'error' variable would hold the error details. In this example, all errors are 'None' meaning no errors occurred (see execution_table error column).

Why is the final read operation returning an empty array?

Because the delete operation removed the only record, so reading the table returns an empty list (see execution_table row 6).

Visual Quiz - 3 Questions

Look at the execution_table, what is the 'data' value after the update operation?

A [{ id: 1, name: 'Ana', age: 26 }]

B [{ id: 1, name: 'Ana', age: 25 }]

C []

D null

💡 Hint

Check the 'Result Data' column at Step 4 in the execution_table.

At which step does the record get removed from the database?

A Step 2

B Step 3

C Step 5

D Step 6

💡 Hint

Look at the 'Operation' and 'Query Sent' columns to find the delete action.

If the insert operation failed, what would you expect in the 'error' variable at Step 2?

A null

B An error object describing the failure

C An empty array

D The inserted data

💡 Hint

Refer to the 'Error' column in the execution_table and the key_moments about error handling.

Concept Snapshot

CRUD with supabase-js:
- Initialize client with URL and key
- Create: .insert([{...}]) adds records
- Read: .select('*') fetches records
- Update: .update({...}).eq('id', x) modifies
- Delete: .delete().eq('id', x) removes
- Each returns { data, error } for results

Full Transcript

This visual execution traces CRUD operations using supabase-js. First, the client is initialized with a URL and key. Then, a new user record is created with insert. Next, all users are read with select. The user's age is updated with update. Then the user is deleted with delete. Finally, reading users again shows an empty list. Variables 'data' and 'error' track results and errors after each step. This shows how supabase-js handles database operations step-by-step.