Caching API responses in Astro - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this Astro component with caching?

Consider this Astro component that fetches data and caches it for 10 seconds. What will it render if the API returns { message: 'Hello' }?

Astro

---
import { cache } from 'astro/cache';
const fetchData = async () => {
  return await cache(async () => {
    const res = await fetch('https://api.example.com/greet');
    return res.json();
  }, 10000);
};
const data = await fetchData();
---
<p>{data.message}</p>

A <p>Hello</p>

B <p>undefined</p>

C <p>{message}</p>

D <p>Error: cache is not a function</p>

💡 Hint

Think about what the cache function returns after fetching.

The cache function stores the API response and returns the JSON data. The component renders the message property, so it outputs Hello.

📝 Syntax

intermediate

Which option correctly caches API data for 5 minutes in Astro?

Choose the correct code snippet that caches the API response for 300000 milliseconds (5 minutes) using Astro's cache function.

A const data = await cache(async () => await fetch('https://api.example.com/data').then(r => r.json()), 300000);

B const data = await cache(async () => fetch('https://api.example.com/data').json(), 300000);

C const data = await cache(() => fetch('https://api.example.com/data').json(), 300000);

D const data = cache(async () => await fetch('https://api.example.com/data').json(), 300000);

💡 Hint

Remember to await the fetch and parse JSON properly inside an async function.

Option A correctly awaits the fetch and JSON parsing inside an async function passed to cache. Other options either miss await or call json() incorrectly.

🔧 Debug

advanced

Why does this Astro cache code throw an error?

This code throws TypeError: cache is not a function. What is the cause?

---
import cache from 'astro/cache';
const data = await cache(async () => {
  const res = await fetch('https://api.example.com/info');
  return res.json();
}, 60000);
---

A The cache function requires a third argument for options

B The import should use curly braces: <code>import { cache } from 'astro/cache';</code>

C The fetch URL is invalid causing the error

D The cache function must be called without await

💡 Hint

Check how cache is imported from the module.

The cache function is a named export, so it must be imported with curly braces. Importing as default causes cache to be undefined, leading to the error.

❓ state_output

advanced

What is the value of data after running this Astro caching code?

Given this code snippet, what is the value of data if the API returns { count: 42 }?

---
import { cache } from 'astro/cache';
const data = await cache(async () => {
  const response = await fetch('https://api.example.com/count');
  const json = await response.json();
  return json.count * 2;
}, 15000);
---

A 42

B { count: 42 }

C undefined

D 84

💡 Hint

Look at what the async function returns inside the cache.

The async function returns json.count * 2, which is 42 * 2 = 84. So data is 84.

🧠 Conceptual

expert

Which statement about Astro's cache function is TRUE?

Choose the correct statement about how Astro's cache function works when caching API responses.

A It caches only the fetch request but not the parsed JSON data.

B It caches the API response permanently until the server restarts.

C It caches the result of the async function and reuses it until the timeout expires, then refetches on next call.

D It caches data only on the client side, not during server rendering.

💡 Hint

Think about how caching with a timeout usually works in server frameworks.

Astro's cache stores the async function's result and returns it for the timeout duration. After timeout, it runs the function again to refresh the cache.