CRUD operations with supabase-js - Deep Dive

Overview - CRUD operations with supabase-js

What is it?

CRUD operations are the basic actions you perform to manage data: Create, Read, Update, and Delete. Supabase-js is a JavaScript library that helps you easily connect to Supabase, a backend service that stores your data in a database. Using supabase-js, you can write simple code to add new data, get existing data, change data, or remove data from your database. This makes building apps with data fast and straightforward.

Why it matters

Without CRUD operations, you cannot manage or change the data your app uses, making it static and useless. Supabase-js solves the problem of talking to a database by providing easy commands that hide complex details. Without tools like supabase-js, developers would spend much more time writing complicated code to handle data, slowing down app development and increasing errors.

Where it fits

Before learning CRUD with supabase-js, you should understand basic JavaScript and how web apps work with data. After mastering CRUD, you can learn about advanced database queries, authentication, real-time updates, and deploying full apps with Supabase.

Mental Model

Core Idea

CRUD operations with supabase-js are like using simple commands to add, look up, change, or remove items in a digital filing cabinet.

Think of it like...

Imagine a library where you can add new books (Create), find books to read (Read), update book information (Update), or remove old books (Delete). Supabase-js is like the librarian who helps you do these tasks quickly and correctly.

┌─────────────┐
│  supabase  │
│   client   │
└─────┬──────┘
      │
      ▼
┌─────────────┐
│  Database   │
│  (tables)   │
└─────────────┘

Operations:
  Create → Insert new rows
  Read   → Select rows
  Update → Modify rows
  Delete → Remove rows

Build-Up - 7 Steps

1

Foundation

Setting up supabase-js client

Concept: Learn how to connect your JavaScript app to Supabase using supabase-js.

First, install supabase-js with npm or yarn. Then, import createClient from '@supabase/supabase-js'. Use your Supabase URL and anon key to create a client instance. This client lets you talk to your database easily. Example: const { createClient } = require('@supabase/supabase-js'); const supabaseUrl = 'https://xyzcompany.supabase.co'; const supabaseKey = 'public-anonymous-key'; const supabase = createClient(supabaseUrl, supabaseKey);

Result

You have a supabase client ready to send commands to your database.

Understanding how to set up the client is the first step to unlocking all database operations with supabase-js.

2

Foundation

Basic structure of CRUD commands

Concept: Learn the common pattern supabase-js uses for all CRUD operations.

Supabase-js uses a chain of commands starting with supabase.from('tableName') to select the table. Then you call methods like .insert(), .select(), .update(), or .delete() to perform actions. Each returns a promise with data and error. Example: const { data, error } = await supabase.from('users').select('*');

Result

You can write commands to interact with any table in your database.

Knowing this pattern helps you predict how to perform any CRUD operation with supabase-js.

3

Intermediate

Creating new records with insert()

🤔Before reading on: do you think insert() can add multiple records at once or only one? Commit to your answer.

Concept: Learn how to add new data rows to a table using insert().

Use insert() with an object or array of objects representing new rows. Each object’s keys match column names. Example single insert: await supabase.from('tasks').insert({ title: 'Buy milk', done: false }); Example multiple inserts: await supabase.from('tasks').insert([ { title: 'Walk dog', done: false }, { title: 'Read book', done: true } ]);

Result

New rows are added to the database table.

Understanding insert() lets you add data flexibly, either one row or many at once, which is efficient for batch operations.

4

Intermediate

Reading data with select() and filters

🤔Before reading on: do you think select() returns all rows by default or requires a filter? Commit to your answer.

Concept: Learn how to get data from tables and narrow results using filters.

select() fetches rows from a table. By default, select('*') returns all rows and columns. You can specify columns like select('id, title'). Use .eq(), .lt(), .like() to filter rows. Example: const { data } = await supabase.from('tasks').select('id, title').eq('done', false); This gets tasks not done yet.

Result

You retrieve only the data you need, reducing load and improving app speed.

Knowing how to filter data prevents fetching too much information and helps build responsive apps.

5

Intermediate

Updating records with update() and filters

🤔Before reading on: do you think update() changes all rows or only those matching filters? Commit to your answer.

Concept: Learn how to change existing data rows selectively.

Use update() with an object of new values, combined with filters to target rows. Example: await supabase.from('tasks').update({ done: true }).eq('id', 5); This marks task with id 5 as done.

Result

Only the specified rows are changed, keeping other data safe.

Understanding update() with filters avoids accidental data loss or unwanted changes.

6

Advanced

Deleting records safely with delete() and filters

🤔Before reading on: do you think delete() removes all rows if no filter is given? Commit to your answer.

Concept: Learn how to remove data rows carefully to avoid mistakes.

delete() removes rows matching filters. Without filters, it deletes all rows, which is dangerous. Example safe delete: await supabase.from('tasks').delete().eq('id', 3); This deletes only the task with id 3. Always use filters to avoid wiping entire tables.

Result

You remove only intended data, protecting your database integrity.

Knowing the risk of delete() without filters helps prevent catastrophic data loss.

7

Expert

Handling errors and optimizing queries

🤔Before reading on: do you think supabase-js throws exceptions on errors or returns error objects? Commit to your answer.

Concept: Learn how to handle errors returned by supabase-js and write efficient queries.

Supabase-js returns { data, error } objects; it does not throw exceptions. Always check error before using data. Example: const { data, error } = await supabase.from('users').select('*'); if (error) { console.error('Error:', error.message); } else { console.log(data); } Also, use .limit(), .order() to optimize data fetching. Example: await supabase.from('tasks').select('*').order('created_at', { ascending: false }).limit(10);

Result

Your app handles failures gracefully and fetches only needed data efficiently.

Understanding error handling and query optimization is key to building robust, performant apps with supabase-js.

Under the Hood

Supabase-js sends HTTP requests to Supabase's RESTful API endpoints that connect to a PostgreSQL database. Each CRUD method translates to SQL commands executed on the server. The client library wraps these calls in JavaScript promises, returning data and error objects. Filters and query modifiers build SQL WHERE, ORDER BY, and LIMIT clauses behind the scenes. This abstraction hides complex SQL and network details from the developer.

Why designed this way?

Supabase-js was designed to simplify database access for frontend and backend JavaScript apps. Using a client library with promise-based calls fits modern JavaScript patterns. The RESTful API with SQL translation allows flexibility and compatibility with PostgreSQL features. This design avoids forcing developers to write raw SQL or manage connections, speeding up development and reducing errors.

┌───────────────┐       HTTP        ┌───────────────┐
│ supabase-js   │ ───────────────▶ │ Supabase API  │
│  client code  │                  │ (REST + SQL)  │
└──────┬────────┘                  └──────┬────────┘
       │                                   │
       │                                   │
       ▼                                   ▼
┌───────────────┐                  ┌───────────────┐
│ JavaScript    │                  │ PostgreSQL    │
│ Promise-based │                  │ Database      │
│ calls        │                  │ (tables)      │
└───────────────┘                  └───────────────┘

Myth Busters - 4 Common Misconceptions

Quick: Does supabase-js throw errors like try/catch or return error objects? Commit to your answer.

Common Belief: Supabase-js throws exceptions on errors, so you must use try/catch blocks.

Reality: Supabase-js returns error objects inside the response; it does not throw exceptions.

Why it matters: Misunderstanding this leads to unhandled errors or missed error checks, causing bugs or crashes.

Quick: If you call delete() without filters, does it delete all rows or none? Commit to your answer.

Common Belief: Calling delete() without filters does nothing or deletes no rows.

Reality: Calling delete() without filters deletes all rows in the table.

Why it matters: This can cause accidental data loss if filters are forgotten.

Quick: Can insert() add multiple rows at once or only one? Commit to your answer.

Common Belief: insert() only adds one row at a time.

Reality: insert() can add one or many rows by passing an object or an array of objects.

Why it matters: Knowing this improves efficiency by batching inserts instead of multiple calls.

Quick: Does select() always return all rows by default? Commit to your answer.

Common Belief: select() returns all rows unless you specify filters.

Reality: select('*') returns all rows, but you can limit or filter results to avoid large data loads.

Why it matters: Fetching too much data can slow apps and waste bandwidth.

Expert Zone

1

Supabase-js supports PostgREST filters that allow complex queries like .or(), .not(), and .in(), enabling powerful data retrieval without raw SQL.

2

Using .select() with foreign table relationships lets you fetch related data in one query, similar to SQL JOINs, improving performance.

3

Supabase-js supports real-time subscriptions to table changes, allowing apps to react instantly to data updates, which is beyond basic CRUD.

When NOT to use

Supabase-js is not ideal for very complex SQL queries requiring advanced joins, window functions, or stored procedures; in such cases, use direct SQL queries or server-side code. Also, for non-JavaScript environments, use Supabase's REST API or other client libraries.

Production Patterns

In production, developers use supabase-js with error handling and loading states to build responsive apps. They batch inserts and updates for efficiency, use filters to limit data, and combine real-time subscriptions with CRUD for live apps like chat or dashboards.

Connections

REST APIs

supabase-js uses REST API calls under the hood to communicate with the database.

Understanding REST principles helps grasp how supabase-js sends commands and receives data, making debugging and advanced usage easier.

SQL Databases

CRUD operations map directly to SQL commands like INSERT, SELECT, UPDATE, DELETE.

Knowing SQL basics clarifies what supabase-js does behind the scenes and helps write better queries.

Library Management Systems

Both manage collections of items with add, find, update, and remove actions.

Seeing CRUD as managing a collection of items like books in a library makes the concept intuitive and relatable.

Common Pitfalls

#1 Deleting data without filters causes full table wipe.

Wrong approach:

await supabase.from('tasks').delete();

Correct approach:

await supabase.from('tasks').delete().eq('id', 10);

Root cause:

Not applying filters before delete() leads to removing all rows unintentionally.

#2 Ignoring error objects after CRUD calls causes silent failures.

Wrong approach:

const { data } = await supabase.from('users').select('*');
console.log(data);

Correct approach:

const { data, error } = await supabase.from('users').select('*');
if (error) { console.error(error); } else { console.log(data); }

Root cause:

Assuming operations always succeed without checking error results in bugs.

#3 Fetching all rows without limits causes slow app and high bandwidth use.

Wrong approach:

await supabase.from('tasks').select('*');

Correct approach:

await supabase.from('tasks').select('*').limit(20);

Root cause:

Not limiting data fetches leads to performance issues on large tables.

Key Takeaways

CRUD operations let you create, read, update, and delete data in your database, forming the foundation of dynamic apps.

Supabase-js simplifies database access by providing easy JavaScript commands that map to SQL operations behind the scenes.

Always use filters with update() and delete() to avoid unintended changes or data loss.

Check for errors after every supabase-js call to handle problems gracefully and keep your app stable.

Optimizing queries with filters and limits improves app speed and reduces unnecessary data transfer.

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