Content collection types (content, data) in Astro - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ query_result

intermediate

Query Result: Fetching Content Collection Items

Given a content collection named posts in Astro, which query will return all items sorted by their date field in descending order?

Astro

const posts = await getCollection('posts');

A const posts = await getCollection('posts'); posts.sort((a, b) => b.data.date.localeCompare(a.data.date));

B const posts = await getCollection('posts'); posts.sort((a, b) => a.data.date - b.data.date);

C const posts = await getCollection('posts'); posts.sort((a, b) => new Date(b.data.date) - new Date(a.data.date));

D const posts = await getCollection('posts'); posts.sort((a, b) => a.data.date.localeCompare(b.data.date));

💡 Hint

Remember that dates need to be converted to Date objects to compare properly.

Option C correctly sorts the posts by date descending by converting the date strings to Date objects and subtracting them. Other options either sort ascending or use string comparison which is unreliable for dates.

🧠 Conceptual

intermediate

Understanding Data Collections vs Content Collections

Which statement best describes the difference between content and data collections in Astro?

A <code>content</code> collections store markdown files with frontmatter, while <code>data</code> collections store JSON or JS objects without markdown.

B <code>data</code> collections store markdown files, while <code>content</code> collections store only JSON files.

C <code>content</code> collections are for static assets like images, <code>data</code> collections are for markdown files.

D <code>data</code> collections are deprecated and replaced by <code>content</code> collections.

💡 Hint

Think about the file types and usage for each collection type.

Content collections are designed for markdown files with frontmatter metadata, while data collections hold structured data like JSON or JavaScript objects without markdown formatting.

📝 Syntax

advanced

Correct Syntax for Defining a Data Collection Schema

Which option correctly defines a schema for a data collection in Astro using zod to require a title string and an optional tags array of strings?

Astro

import { z } from 'astro:content';

export const schema = 

A z.object({ title: z.string(), tags: z.array(z.number()).optional() })

B z.object({ title: z.string().optional(), tags: z.array(z.string()) })

C z.object({ title: z.string(), tags: z.string().array().optional() })

D z.object({ title: z.string(), tags: z.array(z.string()).optional() })

💡 Hint

Check the order of method calls and types inside the z.object.

Option D correctly requires title as a string and makes tags an optional array of strings. Other options have incorrect optional placement, wrong types, or invalid method chaining.

❓ optimization

advanced

Optimizing Content Collection Queries

You want to fetch only the title and date fields from a large posts content collection to improve performance. Which approach is best?

A Use <code>getCollection('posts', { fields: ['title', 'date'] })</code> to fetch only needed fields.

B Use <code>getCollection('posts')</code> and then map to extract <code>title</code> and <code>date</code> from each item.

C Fetch all posts and filter out unwanted fields in the template rendering phase.

D Use <code>getEntry('posts', 'slug')</code> for each post to get only <code>title</code> and <code>date</code>.

💡 Hint

Check if getCollection supports field selection to reduce data fetched.

Option A uses the built-in field selection to fetch only necessary fields, reducing memory and processing. Option A fetches all data then filters, which is less efficient. Option A delays filtering and wastes resources. Option A is inefficient for many posts.

🔧 Debug

expert

Debugging Missing Data in Content Collection Query

You run this code to get a content collection but date is always undefined in results:

const posts = await getCollection('posts');
console.log(posts.map(p => p.data.date));

What is the most likely cause?

A You forgot to import <code>getCollection</code> from <code>astro:content</code>.

B The <code>date</code> field is not declared in the collection schema, so it is not loaded.

C The <code>date</code> field is missing in some markdown frontmatter files.

D You need to call <code>await</code> on <code>posts.map</code> to get data.

💡 Hint

Check if the schema controls which fields are available in data.

If the date field is not declared in the collection schema, Astro excludes it from the data object, causing it to be undefined even if present in frontmatter. Other options either cause errors or are unrelated.

Practice

1. What is the main difference between a content collection and a data collection in Astro?

easy

A. Content collections hold visitor-facing content, while data collections store internal information.

B. Content collections are only for images, data collections are only for text.

C. Content collections require no schema, data collections always require a schema.

D. Content collections are faster to load than data collections.

Solution

1. Step 1: Understand content collections

   Content collections are designed to hold content that visitors see, like blog posts or articles.

2. Step 2: Understand data collections

   Data collections store internal or site-related information, such as settings or configuration data.

3. Final Answer:

   Content collections hold visitor-facing content, while data collections store internal information. -> Option A

4. Quick Check:

   Content = visitor content, Data = internal info [OK]

Hint: Remember: content = visitor content, data = internal info [OK]

Common Mistakes:

• Thinking content collections are only for images
• Assuming data collections are visible to visitors
• Believing schemas are only for data collections

2. Which of the following is the correct way to define a schema field for a content collection in Astro?

easy

A. "title: String"

B. "title: Text"

C. "title = String"

D. "title: string"

Solution

1. Step 1: Recall Astro schema syntax

   Astro schemas use lowercase types like string to define fields.

2. Step 2: Check each option

   "title: string" uses "title: string" which matches the correct syntax. Others use incorrect capitalization or assignment.

3. Final Answer:

   "title: string" -> Option D

4. Quick Check:

   Schema fields use lowercase types like string [OK]

Hint: Use lowercase type names in schema fields [OK]

Common Mistakes:

• Using uppercase types like String
• Using equals sign instead of colon
• Using undefined types like Text

3. Given this Astro content collection schema snippet:

{ title: 'string', published: 'boolean' }

And this content file:

---
title: "Hello World"
published: true
---

What will be the value of published when queried?

medium

A. true

B. "true"

C. 1

D. null

Solution

1. Step 1: Understand schema field type

   The schema defines published as a boolean, so the value should be a true boolean, not a string.

2. Step 2: Check content file value

   The content file sets published: true (boolean true), matching the schema type.

3. Final Answer:

   true -> Option A

4. Quick Check:

   Boolean field returns boolean value true [OK]

Hint: Match schema types exactly for correct data values [OK]

Common Mistakes:

• Confusing boolean true with string "true"
• Expecting numeric 1 for true
• Assuming missing or null value

4. You wrote this schema for a data collection:

{ siteName: 'string', maxUsers: 'number' }

But when querying, maxUsers is always null. What is the likely error?

medium

A. The schema uses 'number' instead of 'int' for numeric fields.

B. The field name maxUsers is misspelled in the data files.

C. Data collections cannot have numeric fields.

D. The schema must use uppercase type names.

Solution

1. Step 1: Check schema type usage

   Astro supports 'number' as a valid type, so 'number' is correct.

2. Step 2: Consider data file consistency

   If maxUsers is null, likely the data files have a different field name or missing value.

3. Final Answer:

   The field name maxUsers is misspelled in the data files. -> Option B

4. Quick Check:

   Field name mismatch causes null values [OK]

Hint: Check field names match exactly in schema and data [OK]

Common Mistakes:

• Assuming 'number' is invalid type
• Thinking data collections disallow numbers
• Using uppercase type names incorrectly

5. You want to create a content collection for blog posts with fields: title (string), tags (array of strings), and published (boolean). Which schema definition is correct?

hard

A. { title: 'string', tags: 'string[]', published: 'boolean' }

B. { title: 'string', tags: ['string'], published: 'boolean' }

C. { title: 'string', tags: { type: 'array', items: 'string' }, published: 'boolean' }

D. { title: 'string', tags: 'array<string>', published: 'boolean' }

Solution

1. Step 1: Understand array field syntax in Astro schemas

   Astro uses an object with type: 'array' and items to define arrays.

2. Step 2: Evaluate each option

   { title: 'string', tags: { type: 'array', items: 'string' }, published: 'boolean' } correctly uses { type: 'array', items: 'string' }. Others use invalid or unsupported syntax.

3. Final Answer:

   { title: 'string', tags: { type: 'array', items: 'string' }, published: 'boolean' } -> Option C

4. Quick Check:

   Arrays use type: 'array' with items field [OK]

Hint: Use object with type 'array' and items for arrays [OK]

Common Mistakes:

• Using 'string[]' as type string
• Using array literal syntax in schema
• Assuming 'array<string>' is valid