codex-lv3-may-2025

Level Navigation: 1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19⚡

20

Level 6: Select Data and Console Log

Goal: Update the fetch function to actually retrieve data from Supabase.

User Story: As a developer, I want to fetch data from my database so that I can see what meals are stored.

---

What You’ll Do

Update the handleFetchMeals function to fetch data from Supabase and log it to console.

Instructions

• Update the handleFetchMeals function to use await supabase.from("potluck_meals").select()
• Store the result in a variable
• Extract the data from the result
• Log the fetched data to console
• Update the meals state with setMeals(data)

💡 Code Hints

Need help with data fetching? Check out these snippets:

Show Me: updated fetch function

async function handleFetchMeals() {
    console.log("Fetching meals...")
    const result = await supabase.from("potluck_meals").select()
    const data = result.data
    console.log("Fetched data:", data);
    setMeals(data);
}

🔍 Diving Deeper

What is async/await?

• async: Marks a function as asynchronous, meaning it can use await and will return a Promise
• await: Pauses execution until a Promise resolves, then returns the resolved value
• Why we need it: Database operations take time (network requests), so we need to wait for them to complete

Understanding Supabase queries:

const result = await supabase.from("potluck_meals").select()

• supabase.from("table_name"): Specifies which table to query
• .select(): Retrieves all columns from the table (like SELECT * in SQL)
• result: Contains both data and error properties
• result.data: The actual data returned from the database
• result.error: Any error that occurred during the query

Error handling pattern:

Always check for errors when working with databases:

if (result.error) {
    console.error('Database error:', result.error);
    return; // Stop execution if there's an error
}

📺 Learn More:

• The Async Await Episode I Promised - Deep dive into async/await
• SQL Explained in 100 Seconds - Understanding SQL basics
• MySQL - The Basics - Comprehensive SQL tutorial

✅ Check

1. Click the “Fetch Meals” button
2. Check the browser console - you should see the fetched data
3. The meals state is updated with the data
4. No console errors occur
5. Data is successfully retrieved from Supabase

---

📚 Vocabulary

• Async - Keyword that makes a function return a Promise
• await - Pauses inside an async function until a Promise is done
• SELECT - SQL command that reads data from a database
• Database (DB) - A structured place to store and organize data
• Supabase - Backend-as-a-service with PostgreSQL database

---

---