CRUD operations with supabase-js - Mini Project: Build & Apply

CRUD operations with supabase-js

📖 Scenario: You are building a simple web app to manage a list of books using Supabase as your backend database. You will create, read, update, and delete book records using the supabase-js client library.

🎯 Goal: Build a basic set of CRUD operations using supabase-js to add, fetch, update, and delete books in the Supabase database.

📋 What You'll Learn

Use the supabase-js client to connect to the database

Create a new book record with exact fields

Fetch all books from the database

Update a book's title by its ID

Delete a book by its ID

💡 Why This Matters

🌍 Real World

Managing data records in a cloud database is a common task in web and mobile apps. Supabase-js provides an easy way to perform these operations with JavaScript.

💼 Career

Understanding CRUD operations with Supabase is useful for backend and full-stack developers working with modern cloud databases and serverless architectures.

1

Initialize Supabase client and create a new book

Create a variable called supabase by calling createClient with the URL 'https://xyzcompany.supabase.co' and the key 'public-anonymous-key'. Then insert a new book into the books table with title set to 'The Great Gatsby' and author set to 'F. Scott Fitzgerald' using supabase.from('books').insert().

Supabase

// Your code here to initialize supabase and insert a book

Hint

Use createClient to connect. Use insert with an array of objects to add a new book.

2

Fetch all books from the database

Create a variable called books and assign it the result of fetching all rows from the books table using supabase.from('books').select('*'). Use await to wait for the data.

Supabase

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

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

await supabase.from('books').insert([{ title: 'The Great Gatsby', author: 'F. Scott Fitzgerald' }]);

// Your code here to fetch all books

Hint

Use select('*') to get all columns. Destructure the data property as books.

3

Update a book's title by ID

Use supabase.from('books').update() to change the title to 'The Great Gatsby - Revised' for the book with id equal to 1. Use eq('id', 1) to filter the row. Use await to wait for the update.

Supabase

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

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

await supabase.from('books').insert([{ title: 'The Great Gatsby', author: 'F. Scott Fitzgerald' }]);

const { data: books } = await supabase.from('books').select('*');

// Your code here to update the book title with id 1

Hint

Use update with an object for new values, then eq to specify the row by id.

4

Delete a book by ID

Use supabase.from('books').delete() to remove the book with id equal to 1. Use eq('id', 1) to filter the row. Use await to wait for the deletion.

Supabase

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

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

await supabase.from('books').insert([{ title: 'The Great Gatsby', author: 'F. Scott Fitzgerald' }]);

const { data: books } = await supabase.from('books').select('*');

await supabase.from('books').update({ title: 'The Great Gatsby - Revised' }).eq('id', 1);

// Your code here to delete the book with id 1

Hint

Use delete() with eq('id', 1) to remove the specific book.

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