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

Need a 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

Need a 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

Need a 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

Need a hint?

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