Fetching APIs in frontmatter in Astro - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the rendered output of this Astro component fetching API data in frontmatter?

Consider this Astro component that fetches a list of users from an API in the frontmatter and renders their names:

---
const response = await fetch('https://jsonplaceholder.typicode.com/users');
const users = await response.json();
---

  {users.map(user => 
{user.name}
)}

What will this component render?

Astro

---
const response = await fetch('https://jsonplaceholder.typicode.com/users');
const users = await response.json();
---
<ul>
  {users.map(user => <li>{user.name}</li>)}
</ul>

A <ul><li>undefined</li></ul>

B SyntaxError: Unexpected token in JSX

C <ul><li>Leanne Graham</li><li>Ervin Howell</li><li>Clementine Bauch</li><li>Patricia Lebsack</li><li>Chelsey Dietrich</li><li>Mrs. Dennis Schulist</li><li>Kurtis Weissnat</li><li>Nicholas Runolfsdottir V</li><li>Glenna Reichert</li><li>Clementina DuBuque</li></ul>

D <ul></ul>

💡 Hint

Think about what the API returns and how the map function transforms it.

The API returns an array of user objects. The map function creates a list item for each user's name, so the component renders a list of all user names.

📝 Syntax

intermediate

Which option correctly fetches API data in Astro frontmatter with error handling?

Choose the correct Astro frontmatter code snippet that fetches data from an API and handles fetch errors gracefully.

A

---
try {
  const response = await fetch('https://api.example.com/data');
  if (!response.ok) throw new Error('Network error');
  const data = await response.json();
} catch (error) {
  const data = null;
}
---

B

---
const response = fetch('https://api.example.com/data');
const data = await response.json();
---

C

---
const response = await fetch('https://api.example.com/data');
const data = await response.json();
---

D

---
const response = await fetch('https://api.example.com/data');
const data = response.json();
---

💡 Hint

Remember to await fetch and check response.ok to catch HTTP errors.

Option A uses try-catch to handle errors and checks if the response is OK before parsing JSON. Other options miss await or error handling.

🔧 Debug

advanced

What error does this Astro frontmatter code produce?

Analyze this Astro frontmatter code snippet:

---
const response = fetch('https://api.example.com/data');
const data = await response.json();
---

What error will occur when this component runs?

Astro

---
const response = fetch('https://api.example.com/data');
const data = await response.json();
---

A TypeError: response.json is not a function

B ReferenceError: response is not defined

C SyntaxError: await is only valid in async function

D RuntimeError: Cannot read property 'json' of undefined

💡 Hint

Consider what fetch returns if you don't await it.

fetch returns a Promise. Without awaiting fetch, response is a Promise, which does not have a json() method. So calling response.json() causes a TypeError.

❓ state_output

advanced

What is the value of 'data' after this Astro frontmatter fetch?

Given this Astro frontmatter code:

---
const response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
const data = await response.json();
---

What is the value of data?

Astro

---
const response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
const data = await response.json();
---

A undefined

B {"userId":1,"id":1,"title":"sunt aut facere repellat provident occaecati excepturi optio reprehenderit","body":"quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"}

C null

D {"error":"Not Found"}

💡 Hint

Check the API endpoint and what it returns.

The API returns a JSON object representing post with id 1. So data contains that object with userId, id, title, and body fields.

🧠 Conceptual

expert

Why is fetching API data in Astro frontmatter beneficial compared to client-side fetching?

Choose the best explanation for why fetching API data in Astro frontmatter is often preferred over fetching it on the client side.

A Because fetching in frontmatter requires no network requests, making the app offline-first.

B Because fetching in frontmatter allows the client to control when data loads, improving user interactivity.

C Because fetching in frontmatter delays rendering until the client fetches data, reducing server load.

D Because fetching in frontmatter happens at build or server time, it improves performance and SEO by sending fully rendered HTML to the browser.

💡 Hint

Think about when frontmatter code runs and how it affects the HTML sent to the browser.

Fetching in frontmatter runs on the server or build time, so the HTML sent to the browser already contains the data. This improves load speed and SEO. Client-side fetching happens after page load, which can delay content display.