Why API routes serve data endpoints in Svelte - Challenge Your Understanding

Challenge - 5 Problems

🧠 Conceptual

intermediate

Why do API routes serve data endpoints in SvelteKit?

In SvelteKit, API routes are used to serve data endpoints. Why is this approach preferred over serving data directly from page components?

A Because API routes separate data fetching logic from UI, making the app more modular and easier to maintain.

B Because page components cannot fetch data at all in SvelteKit.

C Because API routes automatically cache all data without any configuration.

D Because API routes are the only way to serve HTML content in SvelteKit.

💡 Hint

Think about how separating concerns helps in organizing code.

API routes handle data fetching and processing separately from UI rendering. This separation makes the app easier to maintain and test.

❓ component_behavior

intermediate

What happens when you fetch data from an API route in SvelteKit?

Consider a SvelteKit app where a page component fetches JSON data from an API route. What is the expected behavior when the page loads?

A The API route directly renders HTML and sends it to the page component.

B The page component requests data from the API route, which returns JSON; the component then uses this data to render UI.

C The page component cannot fetch data from API routes; it must use static data only.

D The API route sends data as plain text, which the page component cannot parse.

💡 Hint

Think about how JSON data is commonly used between backend and frontend.

API routes return JSON data that page components fetch and use to render dynamic content.

📝 Syntax

advanced

Identify the correct SvelteKit API route syntax to return JSON data

Which of the following code snippets correctly defines a SvelteKit API route that returns JSON data?

Svelte

export async function GET() {
  // return JSON data
}

A

export async function GET() {
  return JSON.stringify({ message: 'Hello' });
}

B

export function get() {
  return { message: 'Hello' };
}

C

export async function GET() {
  return { body: { message: 'Hello' } };
}

D

export async function GET() {
  return new Response(JSON.stringify({ message: 'Hello' }), { headers: { 'Content-Type': 'application/json' } });
}

💡 Hint

Remember that API routes must return a Response object with proper headers.

In SvelteKit, API routes return a Response object with JSON string and content-type header to serve JSON data correctly.

🔧 Debug

advanced

Why does this SvelteKit API route cause a runtime error?

Given this API route code, why does it cause a runtime error when called?

Svelte

export async function GET() {
  return { message: 'Hello' };
}

A Because the function is missing the async keyword.

B Because the JSON data is not stringified before returning.

C Because the function must return a Response object, not a plain object.

D Because the function should be named get with lowercase letters.

💡 Hint

Check what the API route function is expected to return.

SvelteKit API routes must return a Response object. Returning a plain object causes a runtime error.

❓ state_output

expert

What is the output of this SvelteKit page fetching data from an API route?

Consider a SvelteKit page component that fetches data from an API route returning { "count": 5 }. What will be the value of count displayed on the page after loading?

Svelte

<script>
  import { onMount } from 'svelte';
  let count = 0;
  onMount(async () => {
    const res = await fetch('/api/count');
    const data = await res.json();
    count = data.count;
  });
</script>

<p>Count: {count}</p>

A Count: 5

B Count: 0

C Count: undefined

D Count: NaN

💡 Hint

Think about when count is updated and what onMount does.

The page starts with count = 0, but after fetching data from the API route, count is updated to 5 and displayed.