Content collection types (content, data) in Astro - Mini Project: Build & Apply

Create and Use Content Collection Types in Astro

📖 Scenario: You are building a simple Astro website that organizes articles and site settings using content collections.

🎯 Goal: Learn how to create content and data collection types in Astro and add entries to them.

📋 What You'll Learn

Create a content collection type named articles with a schema

Create a data collection type named settings with a schema

Add one article entry to the articles collection

Add one settings entry to the settings collection

💡 Why This Matters

🌍 Real World

Content collections in Astro help organize website content like blog posts and site settings in a structured way.

💼 Career

Knowing how to manage content collections is useful for frontend developers working with Astro or static site generators to build maintainable websites.

1

Create the articles content collection type

Create a content collection type called articles in src/content/config.ts with a schema that requires a title of type string and a published date of type string.

Astro

// Your code here to create the articles content collection type

Hint

Use defineCollection and z.object to define the schema.

2

Create the settings data collection type

Add a data collection type called settings in src/content/config.ts with a schema that requires a siteName of type string and a theme of type string.

Astro

import { defineCollection, z } from 'astro:content';

export const articles = defineCollection({
  schema: z.object({
    title: z.string(),
    published: z.string()
  })
});

export default { articles };

// Your code here to create the settings data collection type

Hint

Remember to set type: 'data' for data collections.

3

Add an article entry to the articles collection

Create a file src/content/articles/first-article.md with frontmatter containing title: 'My First Article' and published: '2024-06-01'. The content can be empty.

Astro

---
title: 'My First Article'
published: '2024-06-01'
---

Hint

Use frontmatter syntax with triple dashes --- at start and end.

4

Add a settings entry to the settings collection

Create a file src/content/settings/site.json with JSON content containing { "siteName": "My Astro Site", "theme": "light" }.

Astro

{
  "siteName": "My Astro Site",
  "theme": "light"
  // Your code here
}

Hint

Use valid JSON syntax with double quotes around keys and values.

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