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().

Practice

1. What does the insert() method do in Supabase?

easy

A. Adds new rows of data to a table

B. Deletes rows from a table

C. Updates existing rows in a table

D. Retrieves data from a table

Solution

1. Step 1: Understand the purpose of insert()

   The insert() method is used to add new data entries (rows) into a database table.

2. Step 2: Differentiate from other methods

   Methods like delete() remove data, update() changes existing data, and select() retrieves data. Only insert() adds new rows.

3. Final Answer:

   Adds new rows of data to a table -> Option A

4. Quick Check:

   insert() = Add rows [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 insert a new user with name 'Alice' into the 'users' table using Supabase client?

easy

A. supabase.insert('users').from({name: 'Alice'})

B. supabase.users.insert('Alice')

C. supabase.table('users').add({name: 'Alice'})

D. supabase.from('users').insert({name: 'Alice'})

Solution

1. Step 1: Recall Supabase insert syntax

   The correct syntax uses supabase.from('table').insert(data) to add data.

2. Step 2: Match syntax with options

   supabase.from('users').insert({name: 'Alice'}) matches the correct pattern: supabase.from('users').insert({name: 'Alice'}). Others misuse method order or names.

3. Final Answer:

   supabase.from('users').insert({name: 'Alice'}) -> Option D

4. Quick Check:

   from('table').insert(data) = correct syntax [OK]

Hint: Use from('table').insert({data}) to add rows [OK]

Common Mistakes:

• Swapping method order like insert().from()
• Using non-existent methods like add()
• Passing data as string instead of object

3. Given this code snippet, what will be the output?

const { data, error } = await supabase
  .from('products')
  .select('*')
  .eq('category', 'books');
console.log(data);

medium

A. An empty array always

B. An error message because of wrong syntax

C. An array of products where category is 'books'

D. All products regardless of category

Solution

1. Step 1: Understand the query filters

   The select('*') fetches all columns, and .eq('category', 'books') filters rows where category equals 'books'.

2. Step 2: Predict the output of console.log(data)

   It will print an array of product objects matching the category 'books'. If no error, data contains matching rows.

3. Final Answer:

   An array of products where category is 'books' -> Option C

4. Quick Check:

   select('*').eq() filters rows = filtered array [OK]

Hint: eq() filters rows by column value [OK]

Common Mistakes:

• Thinking select('*') returns all rows without filter
• Assuming syntax error due to chaining
• Expecting empty array without data

4. What is wrong with this Supabase insert code?

const { data, error } = await supabase
  .from('orders')
  .insert(['item', 'quantity']);

medium

A. insert() expects an array of objects, not an array of strings

B. from() should be called after insert()

C. insert() cannot be awaited

D. Missing .select() after insert()

Solution

1. Step 1: Check insert() argument type

   The insert() method requires an array of objects representing rows, e.g., [{item: 'apple', quantity: 2}]. Passing an array of strings is invalid.

2. Step 2: Verify method order and usage

   Calling from() before insert() is correct. Awaiting insert() is valid. .select() after insert() is optional for returning data.

3. Final Answer:

   insert() expects an array of objects, not an array of strings -> Option A

4. Quick Check:

   insert() needs array of objects [OK]

Hint: Insert data as objects inside array [OK]

Common Mistakes:

• Passing array of strings instead of objects
• Calling from() after insert()
• Thinking insert() can't be awaited

5. You want to insert multiple new users and then immediately fetch all users with age over 20. Which code correctly does this in Supabase?

hard

A. const { data } = await supabase.from('users').select('*').gt('age', 20);
await supabase.from('users').insert([{name: 'Bob', age: 25}, {name: 'Eve', age: 22}]);

B. await supabase.from('users').insert([{name: 'Bob', age: 25}, {name: 'Eve', age: 22}]);
const { data } = await supabase.from('users').select('*').gt('age', 20);

C. await supabase.from('users').insert({name: 'Bob', age: 25, name: 'Eve', age: 22});
const { data } = await supabase.from('users').select('*').gt('age', 20);

D. await supabase.from('users').insert([{name: 'Bob', age: 25}, {name: 'Eve', age: 22}]).select('*').gt('age', 20);

Solution

1. Step 1: Insert multiple users correctly

   Use insert() with an array of objects: [{name: 'Bob', age: 25}, {name: 'Eve', age: 22}]. A single malformed object is invalid.

2. Step 2: Query users with age > 20 after insertion

   Insert first, then use a separate query: supabase.from('users').select('*').gt('age', 20). Querying before insert misses new data; chaining select().gt() after insert() is invalid.

3. Final Answer:

   Insert first, then query with .gt('age', 20) -> Option B

4. Quick Check:

   Insert then query = correct order [OK]

Hint: Insert first, then query filtered data [OK]

Common Mistakes:

• Querying before inserting new data
• Passing single object instead of array for multiple inserts
• Chaining select() after insert() incorrectly