Incremental builds with data in Astro - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to fetch data during build time in Astro.

Astro

export async function getStaticPaths() {
  const data = await fetch('/api/data').then(res => res.json());
  return {
    paths: data.map(item => ({ params: { id: item.id } })),
    [1]: false
  };
}

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

Afallback

Bhydrate

Ccache

Drender

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'hydrate' instead of 'fallback' causes build errors.

Confusing 'render' with the fallback behavior.

The fallback property controls whether Astro should generate pages for paths not returned by getStaticPaths. Setting it to false disables fallback pages.

2fill in blank

medium

Complete the code to define a dynamic route parameter in Astro.

Astro

---
const { params } = Astro;
const id = [1];
---

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

AAstro.id

BAstro.params

Cparams.route

Dparams.id

Attempts:

3 left

💡 Hint

Common Mistakes

Trying to access Astro.id directly.

Using params.route which does not exist.

Dynamic route parameters are accessed via params. Here, params.id gets the id from the URL.

3fill in blank

hard

Fix the error in the code to correctly export a data fetching function for incremental builds.

Astro

export async function [1]() {
  const response = await fetch('https://api.example.com/items');
  const items = await response.json();
  return items;
}

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

AgetStaticProps

BgetServerSideProps

CgetStaticPaths

DgetData

Attempts:

3 left

💡 Hint

Common Mistakes

Using Next.js specific functions like getStaticProps which don't exist in Astro.

Using a non-existent function getData.

In Astro, getStaticPaths is used to fetch data for incremental static generation of pages.

4fill in blank

hard

Fill both blanks to create a dictionary comprehension that filters data during build.

Astro

const filteredData = Object.fromEntries(
  Object.entries(data).filter(([key, value]) => value.[1] [2] 10)
);

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

Ascore

B>

C<

Dlength

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'length' instead of 'score' for the property.

Using '<' instead of '>' causing wrong filtering.

This code filters entries where the score is greater than 10.

5fill in blank

hard

Fill all three blanks to create a map of uppercase keys to values filtered by a condition.

Astro

const result = Object.fromEntries(
  Object.entries(data)
    .filter(([[1], [2]]) => [2] > 0)
    .map(([key, value]) => [key.[3](), value])
);

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

Akey

Bvalue

CtoUpperCase

Dlength

Attempts:

3 left

💡 Hint

Common Mistakes

Swapping key and value names.

Using 'length' instead of 'toUpperCase' for the method.

This code filters entries where the value is greater than zero, then maps keys to uppercase.