Why data fetching happens at build time in Astro - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

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

Astro

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

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

A'https://api.example.com/data'

Bimport data from './data.json'

Cconsole.log('fetch')

D42

Attempts:

3 left

💡 Hint

Common Mistakes

Using a number instead of a URL string

Trying to import data instead of fetching it

The fetch function needs a URL string to get data from an API at build time.

2fill in blank

medium

Complete the code to return static props with fetched data in Astro.

Astro

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

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

Aresponse

Bdata

Citems

Dresult

Attempts:

3 left

💡 Hint

Common Mistakes

Returning a variable that was not defined

Using the wrong variable name

The fetched JSON data is stored in items, which should be returned as props.

3fill in blank

hard

Fix the error in the Astro component to use fetched data correctly.

Astro

---
const { [1] } = Astro.props;
---
<h1>Item List</h1>
<ul>
  {items.map(item => <li>{item.name}</li>)}
</ul>

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

Aitems

Bdata

Cprops

Dresponse

Attempts:

3 left

💡 Hint

Common Mistakes

Destructuring the wrong variable name

Using a variable not passed as prop

The component expects items from props to render the list.

4fill in blank

hard

Fill both blanks to create a static page with data fetched at build time.

Astro

export async function getStaticProps() {
  const res = await fetch([1]);
  const data = await res.json();
  return { props: { [2] } };
}

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

A'https://api.example.com/posts'

Bitems

Cdata

D'https://api.example.com/users'

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing URLs and variable names

Returning wrong variable as props

The URL to fetch posts is needed, and the JSON data variable data should be returned as props.

5fill in blank

hard

Fill all three blanks to fetch data and render it in Astro component.

Astro

---
const { [1] } = Astro.props;
---
<h2>Users</h2>
<ul>
  { [2].map(user => <li key={user.id}>{user.[3]</li>)}
</ul>

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

Ausers

Cname

Did

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong variable names

Accessing a property that doesn't exist

The component destructures users from props, maps over it, and displays each user's name.