Content collection types (content, data) in Astro - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a content collection named 'blog'.

Astro

export const collections = {
  blog: [1]
};

Drag options to blanks, or click blank then click option'

Acollection()

Bdata()

CcontentCollection()

Dcontent()

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'data()' instead of 'content()' to define a content collection.

Trying to use 'collection()' which is not a valid function here.

In Astro, to define a content collection, you use content(). This tells Astro that 'blog' is a content collection.

2fill in blank

medium

Complete the code to define a data collection named 'authors'.

Astro

export const collections = {
  authors: [1]
};

Drag options to blanks, or click blank then click option'

Adata()

Bcollection()

Ccontent()

DdataCollection()

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'content()' instead of 'data()' for data collections.

Trying to use 'dataCollection()' which is not a valid function.

To define a data collection in Astro, you use data(). This marks 'authors' as a data collection.

3fill in blank

hard

Fix the error in the code to correctly define a content collection named 'posts'.

Astro

export const collections = {
  posts: [1]
};

Drag options to blanks, or click blank then click option'

Adata()

Bcontent()

Ccollection()

DcontentCollection()

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'data()' instead of 'content()' for content collections.

Trying to use 'collection()' which is not a valid function.

The correct function to define a content collection is content(). Using data() here would be wrong.

4fill in blank

hard

Fill both blanks to define collections: 'articles' as content and 'team' as data.

Astro

export const collections = {
  articles: [1],
  team: [2]
};

Drag options to blanks, or click blank then click option'

Acontent()

Bdata()

Ccollection()

DcontentCollection()

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up 'content()' and 'data()' for the collections.

Using 'collection()' which is not valid.

Use content() for 'articles' and data() for 'team' to correctly define the collections.

5fill in blank

hard

Fill all three blanks to define collections: 'news' as content, 'profiles' as data, and 'events' as content.

Astro

export const collections = {
  news: [1],
  profiles: [2],
  events: [3]
};

Drag options to blanks, or click blank then click option'

Acontent()

Bdata()

Ccollection()

DcontentCollection()

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'data()' for content collections or vice versa.

Trying to use 'collection()' or 'contentCollection()' which are invalid.

Define 'news' and 'events' as content collections using content(), and 'profiles' as a data collection using data().

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