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.

Practice

1. What does the insert() method do in supabase-js when working with a table?

easy

A. Deletes data rows from the table

B. Adds new data rows to the table

C. Updates existing data rows in the table

D. Fetches data rows from the table

Solution

1. Step 1: Understand the purpose of insert()

   The insert() method is used to add new records to a database table.

2. Step 2: Compare with other CRUD methods

   delete() removes data, update() changes data, and select() fetches data. So insert() must add data.

3. Final Answer:

   Adds new data rows to the table -> Option B

4. Quick Check:

   insert() = add data [OK]

Hint: Insert means add new data rows [OK]

Common Mistakes:

• Confusing insert() with update()
• Thinking insert() deletes data
• Mixing insert() with select()

2. Which of the following is the correct syntax to select all rows from a table named users using supabase-js?

easy

A. supabase.from('users').select('*')

B. supabase.select('*').from('users')

C. supabase.from('users').get('*')

D. supabase.query('users').select('*')

Solution

1. Step 1: Recall supabase-js query structure

   The correct method chain starts with from('table') then select() to specify columns.

2. Step 2: Check each option

   supabase.from('users').select('*') matches the correct order and methods. The other options use incorrect method order or invalid methods.

3. Final Answer:

   supabase.from('users').select('*') -> Option A

4. Quick Check:

   from() then select() = correct syntax [OK]

Hint: Use from('table').select('*') to fetch all rows [OK]

Common Mistakes:

• Swapping order of from() and select()
• Using get() instead of select()
• Using query() which is not a supabase-js method

3. What will be the output of this code snippet?

const { data, error } = await supabase.from('products').select('id, name').eq('category', 'books');
console.log(data);

medium

A. An empty array because 'select' needs all fields specified

B. An error because 'eq' is not a valid method

C. All products with all fields regardless of category

D. An array of products with category 'books' showing only id and name fields

Solution

1. Step 1: Understand the query filters and selects

   The select('id, name') picks only those two fields. The eq('category', 'books') filters rows where category equals 'books'.

2. Step 2: Predict the output

   The result data will be an array of objects with only id and name for products in the 'books' category.

3. Final Answer:

   An array of products with category 'books' showing only id and name fields -> Option D

4. Quick Check:

   select + eq filters data correctly [OK]

Hint: eq() filters rows; select() chooses fields [OK]

Common Mistakes:

• Thinking eq() is invalid
• Assuming select() returns all fields
• Expecting error due to method chaining

4. Identify the error in this supabase-js update code:

const { data, error } = await supabase.from('users').update({ age: 30 }).where('id', 5);

medium

A. Missing select() after update()

B. The update method cannot update numeric fields

C. The method where does not exist; should use eq instead

D. The table name 'users' is invalid

Solution

1. Step 1: Check method chaining for update filters

   supabase-js uses eq() to filter rows, not where().

2. Step 2: Confirm other parts

   Updating numeric fields is allowed, select() is optional, and 'users' is a valid table name.

3. Final Answer:

   The method where does not exist; should use eq instead -> Option C

4. Quick Check:

   Use eq() not where() for filtering [OK]

Hint: Use eq() to filter, not where() [OK]

Common Mistakes:

• Using where() instead of eq()
• Thinking update() needs select() always
• Assuming numeric fields can't be updated

5. You want to delete all rows from the orders table where the status is 'cancelled'. Which code snippet correctly performs this action and handles errors?

hard

A. const { error } = await supabase.from('orders').delete().eq('status', 'cancelled'); if (error) console.error(error);

B. const { data } = await supabase.from('orders').remove().eq('status', 'cancelled'); if (data) console.log(data);

C. const { error } = await supabase.from('orders').delete('status', 'cancelled'); if (error) console.error(error);

D. const { error } = await supabase.from('orders').delete().where('status', 'cancelled'); if (error) console.error(error);

Solution

1. Step 1: Identify correct delete syntax with filter

   supabase-js uses delete() followed by eq('column', value) to filter rows to delete.

2. Step 2: Check error handling

   The code checks if error exists and logs it, which is best practice.

3. Final Answer:

   const { error } = await supabase.from('orders').delete().eq('status', 'cancelled'); if (error) console.error(error); -> Option A

4. Quick Check:

   delete() + eq() + error check = correct [OK]

Hint: Use delete().eq() and check error for safe deletion [OK]

Common Mistakes:

• Using remove() instead of delete()
• Using where() instead of eq()
• Not handling errors after delete