Defining collections and schemas in Astro - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

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

Astro

import { defineCollection } from 'astro:content';

const blog = defineCollection({
  schema: [1]
});

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

Az.string()

Bz.object({ title: z.string() })

Cz.array()

Dz.number()

Attempts:

3 left

💡 Hint

Common Mistakes

Using a primitive schema like z.string() instead of an object schema.

Not importing or using z correctly.

The schema must be an object schema defining the structure of the collection entries. Using z.object({ title: z.string() }) correctly defines a schema with a title string.

2fill in blank

medium

Complete the code to import the 'z' library for schema definitions.

Astro

import { [1] } from 'astro:content';

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

Acollection

BdefineCollection

Cz

Dschema

Attempts:

3 left

💡 Hint

Common Mistakes

Importing only defineCollection and forgetting z.

Using incorrect import names.

You need to import z from 'astro:content' to define schemas for collections.

3fill in blank

hard

Fix the error in the schema definition to require a 'date' field of type string.

Astro

const event = defineCollection({
  schema: z.object({
    title: z.string(),
    date: [1]
  })
});

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

Az.string()

Bz.boolean()

Cz.array()

Dz.number()

Attempts:

3 left

💡 Hint

Common Mistakes

Using number or boolean types for date fields.

Using array type incorrectly.

The 'date' field should be a string to represent dates in ISO format or similar. Using z.string() correctly enforces this.

4fill in blank

hard

Fill both blanks to define a collection with a schema that requires a 'title' string and an optional 'tags' array of strings.

Astro

const articles = defineCollection({
  schema: z.object({
    title: [1],
    tags: [2]
  })
});

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

Az.string()

Bz.number()

Cz.array(z.string()).optional()

Dz.boolean()

Attempts:

3 left

💡 Hint

Common Mistakes

Making 'tags' required instead of optional.

Using wrong types for 'tags' or 'title'.

The 'title' must be a string, so z.string() is correct. The 'tags' field is an optional array of strings, so z.array(z.string()).optional() correctly defines that.

5fill in blank

hard

Fill all three blanks to create a collection schema with 'title' as string, 'published' as boolean, and 'views' as optional number.

Astro

const posts = defineCollection({
  schema: z.object({
    title: [1],
    published: [2],
    views: [3]
  })
});

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

Az.string()

Bz.boolean()

Cz.number().optional()

Dz.array()

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting to mark 'views' as optional.

Using wrong types for any field.

The 'title' is a string, so z.string() is correct. 'published' is a boolean, so z.boolean() fits. 'views' is an optional number, so z.number().optional() is the right choice.

Practice

1. What is the main purpose of defining a collection in Astro?

easy

A. To group related content files together for easier management

B. To style components with CSS

C. To create server-side API routes

D. To define client-side JavaScript behavior

Solution

1. Step 1: Understand what collections represent

   Collections in Astro are used to organize related content files, like blog posts or projects, into one group.

2. Step 2: Identify the purpose of collections

   This grouping helps manage content easily and apply schemas to all items in the collection.

3. Final Answer:

   To group related content files together for easier management -> Option A

4. Quick Check:

   Collections group content = A [OK]

Hint: Collections group content files logically for easy access [OK]

Common Mistakes:

• Confusing collections with styling or scripts
• Thinking collections define UI components
• Assuming collections are for API routes

2. Which of the following is the correct way to define a schema field for a required string called title in Astro's collection schema?

easy

A. "title: { type: 'number', required: true }"

B. "title: { type: 'string', required: true }"

C. "title: String"

D. "title: { required: false }"

Solution

1. Step 1: Recall schema field syntax in Astro

   Astro schemas use objects with type and required properties to define fields.

2. Step 2: Match the correct field definition

   The field title must be a string and required, so { type: 'string', required: true } is correct.

3. Final Answer:

   "title: { type: 'string', required: true }" -> Option B

4. Quick Check:

   Schema field with type string and required true = C [OK]

Hint: Use object with type and required keys for schema fields [OK]

Common Mistakes:

• Using primitive types directly without object
• Setting wrong type like number for string fields
• Omitting required property or setting it false

3. Given this Astro collection schema snippet:

const blogSchema = {
  title: { type: 'string', required: true },
  published: { type: 'boolean', required: false }
};

What happens if a blog post content file omits the published field?

medium

A. The build warns but still includes the content

B. The content is invalid and causes a build error

C. The published field defaults to true automatically

D. The content is valid because published is optional

Solution

1. Step 1: Check the required property of published

   The field published has required: false, so it is optional.

2. Step 2: Understand schema validation behavior

   Omitting optional fields does not cause errors; the content remains valid.

3. Final Answer:

   The content is valid because published is optional -> Option D

4. Quick Check:

   Optional fields can be omitted = A [OK]

Hint: Fields with required: false can be left out safely [OK]

Common Mistakes:

• Assuming all fields are required by default
• Thinking missing optional fields cause errors
• Believing default values are set automatically

4. You wrote this schema for a collection:

const projectSchema = {
  name: { type: 'string', required: true },
  year: { type: 'number', required: true }
};

But when building, you get an error about the year field. What is the likely cause?

medium

A. The content file has year as a string instead of a number

B. The name field is missing in the content file

C. The schema is missing a required property for name

D. Astro does not support number types in schemas

Solution

1. Step 1: Understand schema type enforcement

   Astro checks that the content field types match the schema types exactly.

2. Step 2: Identify mismatch cause

   If year is defined as a number but the content file has it as a string, it causes a type error.

3. Final Answer:

   The content file has year as a string instead of a number -> Option A

4. Quick Check:

   Type mismatch between schema and content causes errors = B [OK]

Hint: Match content field types exactly to schema types [OK]

Common Mistakes:

• Ignoring type mismatches in content files
• Assuming missing required fields cause this error
• Thinking Astro disallows number types

5. You want to define a collection schema in Astro where each item must have a title (string), an optional tags array of strings, and a date that must be a valid ISO date string. Which schema definition is correct?

hard

A. { title: { type: 'string', required: true }, tags: { type: 'string', required: false }, date: { type: 'string', required: false } }

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

C. { title: { type: 'string', required: true }, tags: { type: 'array', items: { type: 'string' }, required: false }, date: { type: 'string', format: 'date-time', required: true } }

D. { title: { type: 'string' }, tags: { type: 'string[]' }, date: { type: 'date' } }

Solution

1. Step 1: Define required string field title

   Use { type: 'string', required: true } for title.

2. Step 2: Define optional array of strings tags

   Use { type: 'array', items: { type: 'string' }, required: false } to specify an optional array of strings.

3. Step 3: Define date as required ISO date string

   Use { type: 'string', format: 'date-time', required: true } to enforce ISO date format.

4. Final Answer:

   { title: { type: 'string', required: true }, tags: { type: 'array', items: { type: 'string' }, required: false }, date: { type: 'string', format: 'date-time', required: true } } -> Option C

5. Quick Check:

   Correct types and required flags with array and date format = D [OK]

Hint: Use type 'array' with items for arrays; use format for dates [OK]

Common Mistakes:

• Using incorrect type syntax for arrays
• Omitting required flags or setting wrong ones
• Not specifying date format for ISO strings