Rendering collection content in Astro - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ query_result

intermediate

Rendering a list of blog posts

You have a collection of blog posts stored in a database. Each post has a title and date. You want to render a list of post titles sorted by date descending.

Which SQL query will return the correct ordered list of titles?

A SELECT title FROM posts ORDER BY date DESC;

B SELECT title FROM posts ORDER BY date ASC;

C SELECT title FROM posts WHERE date DESC;

D SELECT title FROM posts SORT BY date DESC;

💡 Hint

Think about how to order results from newest to oldest.

Option A correctly orders posts by date descending, showing newest first. Option A orders ascending (oldest first). Option A has invalid syntax. Option A uses a non-standard keyword.

🧠 Conceptual

intermediate

Understanding collection rendering with filters

You want to render only published articles from a collection where each article has a status field. Which SQL WHERE clause filters published articles?

A WHERE status = 'published'

B WHERE status == 'published'

C WHERE status LIKE 'published'

D WHERE status IN published

💡 Hint

Use the standard equality operator in SQL.

Option A uses correct SQL syntax for equality. Option A uses double equals which is invalid in SQL. Option A uses LIKE which is for pattern matching, not exact match. Option A is invalid syntax.

📝 Syntax

advanced

Fix the syntax error in this SQL query for rendering collection content

Identify the option that fixes the syntax error in this query:

SELECT title, date FROM posts WHERE status = 'published' ORDER date DESC;

A SELECT title, date FROM posts WHERE status = 'published' ORDER date ASC;

B SELECT title, date FROM posts WHERE status = 'published' SORT BY date DESC;

C SELECT title, date FROM posts WHERE status = 'published' ORDER BY DESC date;

D SELECT title, date FROM posts WHERE status = 'published' ORDER BY date DESC;

💡 Hint

Check the correct keyword for ordering results in SQL.

Option D uses the correct 'ORDER BY' syntax. Option D uses invalid 'SORT BY'. Option D misses 'BY' keyword. Option D has wrong order of keywords.

❓ optimization

advanced

Optimizing rendering of large collections

You want to render a large collection of products but only show 20 per page. Which SQL clause helps limit the number of rows returned for pagination?

A FETCH FIRST 20 ROWS ONLY

B TOP 20

C LIMIT 20

D MAXROWS 20

💡 Hint

Consider the standard SQL clause for limiting rows.

Option C is standard SQL for limiting rows. Option C is specific to some SQL dialects like SQL Server. Option C is valid in some dialects but less common. Option C is invalid.

🔧 Debug

expert

Debug why rendering collection content returns no rows

You run this query to render published posts but get no results:

SELECT * FROM posts WHERE status = 'publish';

What is the most likely reason?

A The table 'posts' does not exist

B The status value should be 'published' not 'publish'

C The query needs ORDER BY clause

D The SELECT * syntax is invalid

💡 Hint

Check the exact values stored in the status field.

Option B is correct because the status value is likely 'published' not 'publish'. Option B would cause an error, not empty result. Option B is optional and does not affect results. Option B is valid syntax.

Practice

1. What does Astro.fetchContent do in rendering collection content?

easy

A. It deletes items from the database.

B. It styles the collection items automatically.

C. It fetches data from a collection to display on the page.

D. It creates a new collection in the database.

Solution

1. Step 1: Understand the purpose of Astro.fetchContent

   This function is used to get data from a collection, so you can use it in your page.

2. Step 2: Identify what happens with the data

   The fetched data is then used to show each item on the page, not to style, delete, or create collections.

3. Final Answer:

   It fetches data from a collection to display on the page. -> Option C

4. Quick Check:

   Astro.fetchContent fetches data [OK]

Hint: Remember: fetch means get data, not change it [OK]

Common Mistakes:

• Thinking fetchContent styles or deletes data
• Confusing fetching with creating collections

2. Which of the following is the correct syntax to loop through a collection named posts in Astro to render each item?

easy

A. {posts.each(post => <div>{post.title}</div>)}

B. {posts.forEach(post => <div>{post.title}</div>)}

C. {posts.loop(post => <div>{post.title}</div>)}

D. {posts.map(post => <div>{post.title}</div>)}

Solution

1. Step 1: Identify the correct method to transform arrays in Astro

   Astro uses JavaScript array methods; .map() returns a new array of elements for rendering.

2. Step 2: Check other options for correctness

   forEach does not return an array, so it won't render correctly. loop and each are not valid JavaScript array methods.

3. Final Answer:

   {posts.map(post => <div>{post.title}</div>)} -> Option D

4. Quick Check:

   Use .map() to render collections [OK]

Hint: Use .map() to create elements from arrays [OK]

Common Mistakes:

• Using forEach which returns undefined
• Using non-existent methods like loop or each

3. Given the collection products with items [{name: 'Pen'}, {name: 'Book'}], what will this Astro code output?

{products.map(p => `
${p.name}
`).join('')}

medium

A. PenBook

B. [object Object][object Object]

C. products

D. SyntaxError

Solution

1. Step 1: Understand the map function output

   Each product's name is wrapped in <p> tags, creating an array of strings: ['

   Pen

   ', '

   Book

   '].

2. Step 2: Understand the join('') method

   Joining the array with empty string combines the strings into one: '

   Pen

   Book

   '.

3. Final Answer:

   <p>Pen</p><p>Book</p> -> Option A

4. Quick Check:

   map + join creates combined HTML string [OK]

Hint: map returns array; join('') combines to string [OK]

Common Mistakes:

• Expecting array output instead of joined string
• Confusing object output with string output

4. You wrote this code to render a collection but get an error:

const items = Astro.fetchContent('items');
return items.map(item => <li>{item.name}</li>);

What is the likely problem?

medium

A. You used map instead of forEach.

B. Astro.fetchContent returns a Promise, but you didn't await it.

C. You forgot to import Astro.

D. You cannot use return inside Astro components.

Solution

1. Step 1: Check how Astro.fetchContent works

   This function returns a Promise, so you must await it to get the data array.

2. Step 2: Identify the error cause

   Without await, items is a Promise object, so calling map on it causes an error.

3. Final Answer:

   Astro.fetchContent returns a Promise, but you didn't await it. -> Option B

4. Quick Check:

   Always await async fetchContent calls [OK]

Hint: Always await fetchContent to get data array [OK]

Common Mistakes:

• Not awaiting async fetchContent
• Confusing map and forEach usage
• Assuming fetchContent returns data directly

5. You want to render a list of blog posts but only show posts with a published flag set to true. Which Astro code correctly fetches and renders only published posts from the blogs collection?

hard

A. const posts = await Astro.fetchContent('blogs');
return posts.filter(post => post.published).map(post => <article>{post.title}</article>);

B. const posts = Astro.fetchContent('blogs').filter(post => post.published);
return posts.map(post => <article>{post.title}</article>);

C. const posts = await Astro.fetchContent('blogs');
return posts.map(post => {
if(post.published) return <article>{post.title}</article>;
});

D. const posts = await Astro.fetchContent('blogs');
return posts.map(post => post.published ? <article>{post.title}</article> : null);

Solution

1. Step 1: Fetch the collection data asynchronously

   Use await with Astro.fetchContent to get the posts array.

2. Step 2: Filter posts with published flag true before rendering

   Use filter(post => post.published) to keep only published posts, then map to render.

3. Final Answer:

   Fetch with await, filter published, then map to render. -> Option A

4. Quick Check:

   Filter before map for conditional rendering [OK]

Hint: Filter first, then map to render filtered items [OK]

Common Mistakes:

• Not awaiting fetchContent before filtering
• Filtering on Promise instead of data array
• Returning undefined for unfiltered items