Inserting and querying data in Supabase - Mini Project: Build & Apply

Inserting and querying data

📖 Scenario: You are building a simple cloud database for a small bookstore. You want to add books to the database and then find books by their author.

🎯 Goal: Create a table with book data, add a configuration variable for filtering, write a query to find books by a specific author, and complete the setup to return the query results.

📋 What You'll Learn

Create a table called books with columns id, title, and author

Insert three specific books into the books table

Create a variable called author_name to filter books by author

Write a query to select books where author matches author_name

Complete the query to return the filtered books

💡 Why This Matters

🌍 Real World

Managing and querying data in a cloud database is essential for many applications like online stores, blogs, and inventory systems.

💼 Career

Knowing how to insert and query data in cloud databases like Supabase is a key skill for backend developers and cloud engineers.

1

Create the books table and insert data

Write SQL commands to create a table called books with columns id (integer, primary key), title (text), and author (text). Then insert these three books exactly: (1, 'The Hobbit', 'J.R.R. Tolkien'), (2, '1984', 'George Orwell'), and (3, 'To Kill a Mockingbird', 'Harper Lee').

Supabase

-- Your SQL code here to create table and insert data

Hint

Use CREATE TABLE to make the table, then INSERT INTO to add each book.

2

Add a variable to filter by author

Create a variable called author_name and set it to the string 'George Orwell'. This will be used to find books by this author.

Supabase

CREATE TABLE books (id INTEGER PRIMARY KEY, title TEXT, author TEXT);
INSERT INTO books (id, title, author) VALUES (1, 'The Hobbit', 'J.R.R. Tolkien');
INSERT INTO books (id, title, author) VALUES (2, '1984', 'George Orwell');
INSERT INTO books (id, title, author) VALUES (3, 'To Kill a Mockingbird', 'Harper Lee');

-- Create a variable called author_name and set it to 'George Orwell'
-- Your code here

Hint

Assign the string 'George Orwell' to the variable author_name.

3

Write a query to select books by author

Write a SQL query to select all columns from the books table where the author column matches the variable author_name. Use a placeholder or parameter for author_name in the query.

Supabase

CREATE TABLE books (id INTEGER PRIMARY KEY, title TEXT, author TEXT);
INSERT INTO books (id, title, author) VALUES (1, 'The Hobbit', 'J.R.R. Tolkien');
INSERT INTO books (id, title, author) VALUES (2, '1984', 'George Orwell');
INSERT INTO books (id, title, author) VALUES (3, 'To Kill a Mockingbird', 'Harper Lee');
author_name = 'George Orwell'

-- Write a SQL query to select all books where author equals author_name
-- Your code here

Hint

Use a parameter placeholder like :author_name in the SQL query string.

4

Complete the query execution to get results

Write code to execute the query using the Supabase client, passing author_name as a parameter, and assign the result to a variable called result. Use the method supabase.rpc or supabase.from('books').select().eq() as appropriate.

Supabase

CREATE TABLE books (id INTEGER PRIMARY KEY, title TEXT, author TEXT);
INSERT INTO books (id, title, author) VALUES (1, 'The Hobbit', 'J.R.R. Tolkien');
INSERT INTO books (id, title, author) VALUES (2, '1984', 'George Orwell');
INSERT INTO books (id, title, author) VALUES (3, 'To Kill a Mockingbird', 'Harper Lee');
author_name = 'George Orwell'
query = "SELECT * FROM books WHERE author = :author_name"

-- Execute the query using supabase client and assign to result
-- Your code here

Hint

Use supabase.from('books').select('*').eq('author', author_name) to get the filtered books.

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