Inserting and querying data in Supabase - Step-by-Step Execution

Process Flow - Inserting and querying data

Start

↓

Connect to DB

↓

Insert Data

↓

Query Data

↓

Receive Results

↓

End

The flow starts by connecting to the database, then inserting data, followed by querying the data, and finally receiving the results.

Execution Sample

Supabase

const { data, error } = await supabase
  .from('users')
  .insert([{ name: 'Alice', age: 30 }])
  .select();

This code inserts a new user named Alice with age 30 into the 'users' table and then queries the inserted data.

Process Table

Step	Action	Input Data	Database State	Output	Notes
1	Connect to DB	None	DB ready	Connection established	Ready to perform operations
2	Insert Data	{ name: 'Alice', age: 30 }	Empty users table	Insert success	Data added to users table
3	Query Data	Select all from users	Users table has Alice	[{ name: 'Alice', age: 30 }]	Returns inserted data
4	End	None	Users table unchanged	Operation complete	Process finished

💡 All steps completed successfully, data inserted and queried.

Status Tracker

Variable	Start	After Step 2	After Step 3	Final
data	undefined	[{ name: 'Alice', age: 30 }]	[{ name: 'Alice', age: 30 }]	[{ name: 'Alice', age: 30 }]
error	undefined	null	null	null

Key Moments - 2 Insights

Why do we use .select() after .insert()?

Using .select() after .insert() tells Supabase to return the inserted data. Without it, you get no data back. See execution_table step 3.

What happens if the insert fails?

If insert fails, the error variable will hold details and data will be undefined or null. This is not shown here because insert succeeded (see variable_tracker).

Visual Quiz - 3 Questions

Look at the execution_table at step 3, what is the output?

A [{ name: 'Alice', age: 30 }]

B Insert success message

C Connection established

D Empty array

💡 Hint

Check the 'Output' column in execution_table row for step 3.

At which step does the database state change to include the new user?

A Step 1

B Step 2

C Step 3

D Step 4

💡 Hint

Look at the 'Database State' column in execution_table for when data is added.

If .select() was removed from the code, what would change in variable_tracker?

A data would still contain inserted data

B error would contain an error message

C data would be undefined after insert

D No change at all

💡 Hint

Refer to key_moments about why .select() is used after insert.

Concept Snapshot

Supabase insert and query:
- Use .from('table') to select table
- Use .insert([{...}]) to add data
- Use .select() after insert to get inserted rows
- Await the call to get data and error
- Check error to handle failures

Full Transcript

This visual execution shows how to insert and query data using Supabase. First, the connection to the database is established. Then, data is inserted into the 'users' table with name and age fields. After insertion, a query is made to select the inserted data by chaining .select() after .insert(). The output shows the inserted user data returned. Variables 'data' and 'error' track the results and any errors. Key moments clarify why .select() is needed to get data back and what happens if insert fails. The quiz tests understanding of output at each step and the effect of removing .select().