Querying collection entries in Astro - Mini Project: Build & Apply

Querying Collection Entries in Astro

📋 What You'll Learn

💡 Why This Matters

🌍 Real World

Filtering and querying collections is common when building blogs, portfolios, or any content-driven website with Astro.

💼 Career

Understanding how to query and manipulate collections is essential for frontend developers working with modern static site generators and frameworks.

1

Create the blog collection with posts

Create a collection called blog with three posts having slugs post-one, post-two, and post-three. Each post should have frontmatter fields title, date, and published. Use these exact values:

- post-one: title "First Post", date "2024-01-01", published true
- post-two: title "Second Post", date "2024-02-01", published false
- post-three: title "Third Post", date "2024-03-01", published true

Astro

# Your code here to create the blog collection with three posts and their frontmatter

Hint

Define an exported constant array named blog with objects for each post including the exact fields and values.

2

Add a filter condition for published posts

Create a variable called publishedPosts that filters the blog collection to include only posts where published is true.

Astro

export const blog = [
  {
    slug: 'post-one',
    title: 'First Post',
    date: '2024-01-01',
    published: true
  },
  {
    slug: 'post-two',
    title: 'Second Post',
    date: '2024-02-01',
    published: false
  },
  {
    slug: 'post-three',
    title: 'Third Post',
    date: '2024-03-01',
    published: true
  }
];

// Your code here to create publishedPosts filtering only published posts

Hint

Use the filter method on blog to keep only posts with published set to true.

3

Extract titles and dates of published posts

Create a variable called publishedTitlesAndDates that maps over publishedPosts to create a new array of objects containing only the title and date fields.

Astro

export const blog = [
  {
    slug: 'post-one',
    title: 'First Post',
    date: '2024-01-01',
    published: true
  },
  {
    slug: 'post-two',
    title: 'Second Post',
    date: '2024-02-01',
    published: false
  },
  {
    slug: 'post-three',
    title: 'Third Post',
    date: '2024-03-01',
    published: true
  }
];

const publishedPosts = blog.filter(post => post.published === true);

// Your code here to map publishedPosts to only title and date

Hint

Use map on publishedPosts to create objects with only title and date.

4

Export the final filtered and mapped data

Export the variable publishedTitlesAndDates so it can be used in your Astro components.

Astro

export const blog = [
  {
    slug: 'post-one',
    title: 'First Post',
    date: '2024-01-01',
    published: true
  },
  {
    slug: 'post-two',
    title: 'Second Post',
    date: '2024-02-01',
    published: false
  },
  {
    slug: 'post-three',
    title: 'Third Post',
    date: '2024-03-01',
    published: true
  }
];

const publishedPosts = blog.filter(post => post.published === true);

const publishedTitlesAndDates = publishedPosts.map(post => ({ title: post.title, date: post.date }));

// Your code here to export publishedTitlesAndDates

Hint

Use an export statement to export publishedTitlesAndDates.

Practice

1. What does the where method do when querying collection entries in Astro Framework?

easy

A. It filters entries based on a given condition.

B. It deletes entries from the collection.

C. It adds new entries to the collection.

D. It sorts entries alphabetically.

Solution

1. Step 1: Understand the purpose of where

   The where method is used to select only those entries that meet a specific condition.

2. Step 2: Compare with other options

   Deleting, adding, or sorting entries are different operations not done by where.

3. Final Answer:

   It filters entries based on a given condition. -> Option A

4. Quick Check:

   where filters entries [OK]

Hint: Remember: where means filter entries by condition [OK]

Common Mistakes:

• Confusing where with adding or deleting entries
• Thinking where sorts entries
• Assuming where modifies the collection permanently

2. Which of the following is the correct syntax to filter entries where the field status equals "active"?

easy

A. collection.where(entry => entry.status == "active")

B. collection.filter(status = "active")

C. collection.where(status == "active")

D. collection.where(entry.status = "active")

Solution

1. Step 1: Identify correct function usage

   The where method expects a function that takes an entry and returns a boolean condition.

2. Step 2: Check each option's syntax

   collection.where(entry => entry.status == "active") correctly uses a function with an arrow and compares entry.status to "active". Others have syntax errors or wrong usage.

3. Final Answer:

   collection.where(entry => entry.status == "active") -> Option A

4. Quick Check:

   Correct arrow function syntax = collection.where(entry => entry.status == "active") [OK]

Hint: Use arrow function with entry parameter in where [OK]

Common Mistakes:

• Using assignment (=) instead of comparison (==)
• Omitting the entry parameter in the function
• Passing condition directly without a function

3. Given the collection entries:

[{ id: 1, type: "fruit" }, { id: 2, type: "vegetable" }, { id: 3, type: "fruit" }]

What will collection.where(entry => entry.type == "fruit") return?

medium

A. []

B. [{ id: 1, type: "fruit" }, { id: 3, type: "fruit" }]

C. [{ id: 2, type: "vegetable" }]

D. SyntaxError

Solution

1. Step 1: Identify entries matching the condition

   Entries with type == "fruit" are those with id 1 and 3.

2. Step 2: Understand where output

   The where method returns a list of matching entries, so it returns the two fruit entries.

3. Final Answer:

   [{ id: 1, type: "fruit" }, { id: 3, type: "fruit" }] -> Option B

4. Quick Check:

   Filter fruits = entries 1 and 3 [OK]

Hint: Filter entries by condition to get matching list [OK]

Common Mistakes:

• Returning non-matching entries
• Expecting a single entry instead of a list
• Confusing syntax error with correct code

4. What is wrong with this query?

collection.where(entry => entry.status = "active")

medium

A. The where method does not accept functions.

B. The arrow function is missing parentheses.

C. It uses assignment (=) instead of comparison (==).

D. The string "active" should be in single quotes.

Solution

1. Step 1: Identify the operator used

   The query uses a single equals sign (=), which assigns a value instead of comparing.

2. Step 2: Understand correct comparison syntax

   To compare, double equals (==) must be used inside the function.

3. Final Answer:

   It uses assignment (=) instead of comparison (==). -> Option C

4. Quick Check:

   Use == for comparison, not = [OK]

Hint: Use == for comparison inside where functions [OK]

Common Mistakes:

• Using = instead of == causes wrong filtering
• Thinking parentheses are required around single parameter
• Believing where can't take functions

5. You want to find all entries where score is greater than 50 and passed is true. Which query correctly does this?

hard

A. collection.where(entry => entry.score > 50, entry.passed == true)

B. collection.where(entry => entry.score > 50 || entry.passed == true)

C. collection.where(entry => entry.score > 50 & entry.passed == true)

D. collection.where(entry => entry.score > 50 && entry.passed == true)

Solution

1. Step 1: Understand logical AND condition

   To require both conditions, use the logical AND operator &&.

2. Step 2: Check each option's logic

   collection.where(entry => entry.score > 50 && entry.passed == true) uses && correctly. collection.where(entry => entry.score > 50 || entry.passed == true) uses OR (||), collection.where(entry => entry.score > 50 & entry.passed == true) uses bitwise AND (&) which is incorrect here, and collection.where(entry => entry.score > 50, entry.passed == true) has invalid syntax with two parameters.

3. Final Answer:

   collection.where(entry => entry.score > 50 && entry.passed == true) -> Option D

4. Quick Check:

   Use && for AND conditions in where [OK]

Hint: Use && to combine multiple conditions inside where [OK]

Common Mistakes:

• Using || instead of && for AND condition
• Using bitwise & instead of logical &&
• Passing multiple arguments instead of one function