CRUD operations with supabase-js - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ service_behavior

intermediate

What is the output of this Supabase insert operation?

Given the following code snippet using supabase-js, what will be the value of data after execution?

Supabase

const { data, error } = await supabase
  .from('profiles')
  .insert([{ id: '123', username: 'alice' }]);

A An array with the inserted row object: [{ id: '123', username: 'alice' }]

B null

C An empty array []

D A string message confirming insertion

💡 Hint

Think about what supabase-js returns after a successful insert.

When you insert data using supabase-js, the data contains an array of the inserted rows. Here, it will be an array with the inserted object.

❓ Configuration

intermediate

Which option correctly updates a user's email in supabase-js?

You want to update the email of the user with id 'abc123' in the 'users' table. Which code snippet correctly performs this update?

A await supabase.from('users').modify({ email: '[e-mail]' }).filter('id', 'abc123');

B await supabase.from('users').set({ email: '[e-mail]' }).where('id', 'abc123');

C await supabase.from('users').update({ email: '[e-mail]' }).eq('id', 'abc123');

D await supabase.update('users').set({ email: '[e-mail]' }).eq('id', 'abc123');

💡 Hint

Check the supabase-js method names for updating and filtering.

The correct method to update rows is update() and to filter rows is eq(). Option C uses both correctly.

❓ Architecture

advanced

Which architecture best supports real-time updates with supabase-js?

You want your app to show live changes from the 'messages' table without refreshing. Which architecture choice best supports this with supabase-js?

A Use a separate REST API server to push updates to the client.

B Periodically poll the 'messages' table every 5 seconds using supabase-js select queries.

C Fetch all messages once on app load and store locally without updates.

D Use supabase-js subscriptions to listen to changes on 'messages' and update UI accordingly.

💡 Hint

Supabase supports real-time subscriptions natively.

Supabase-js provides real-time subscriptions to listen to database changes. This allows the app to update UI live without polling.

❓ security

advanced

Which option correctly restricts data access in supabase-js using Row Level Security (RLS)?

You want to ensure users can only read their own profiles from the 'profiles' table. Which setup correctly enforces this using supabase-js and RLS?

A Use supabase-js to filter profiles by user id but keep RLS disabled.

B Enable RLS on 'profiles' and create a policy: 'USING (auth.uid() = id)'. Then query normally with supabase-js.

C Enable RLS but do not create any policies; supabase-js will automatically restrict access.

D Disable RLS and filter profiles by user id in supabase-js client code.

💡 Hint

RLS requires explicit policies to restrict access.

Row Level Security must be enabled and a policy created to restrict access. The policy 'USING (auth.uid() = id)' ensures users only access their own rows.

✅ Best Practice

expert

What is the best practice to handle errors in supabase-js CRUD operations?

You perform an insert operation with supabase-js. Which approach correctly handles possible errors?

Supabase

const { data, error } = await supabase.from('tasks').insert([{ title: 'New Task' }]);

A Check if <code>error</code> is not null and handle it before using <code>data</code>.

B Ignore <code>error</code> and assume <code>data</code> is always valid.

C Use try-catch block around the insert call without checking <code>error</code>.

D Only check if <code>data</code> is null to detect errors.

💡 Hint

Supabase-js returns errors separately from data.

Supabase-js returns error separately. Always check if error is present before using data to avoid unexpected issues.

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