Server endpoints (API routes) in Astro - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What does this Astro server endpoint return?

Consider this Astro server endpoint code. What is the JSON response when a GET request is made?

Astro

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

A {"message":"Hello from Astro!"}

B {"msg":"Hello from Astro!"}

C Hello from Astro!

D {"message":"Hello from Astro"}

💡 Hint

Look carefully at the JSON key and exact string value returned.

The endpoint returns a JSON object with key 'message' and value 'Hello from Astro!'. The response is stringified JSON with correct key and punctuation.

📝 Syntax

intermediate

Which option causes a syntax error in Astro API route?

Identify which server endpoint code snippet will cause a syntax error in Astro.

A

export async function DELETE {
  return new Response('Deleted');
}

B

export async function GET() {
  return new Response('OK');
}

C

export async function PUT() {
  return new Response('Updated')
}

D

export async function POST({ request }) {
  const data = await request.json();
  return new Response(JSON.stringify(data));
}

💡 Hint

Check function declaration syntax carefully.

Option A is missing parentheses after DELETE in function declaration, causing a syntax error.

❓ state_output

advanced

What is the response status code of this Astro API route?

Given this Astro server endpoint, what status code will the client receive?

Astro

export async function GET() {
  return new Response('Not Found', { status: 404 });
}

A 200

B 302

C 500

D 404

💡 Hint

Look at the status property in the Response options.

The Response is created with status 404, so the client receives HTTP 404 Not Found.

🔧 Debug

advanced

Why does this Astro API route fail to parse JSON?

This Astro POST endpoint tries to parse JSON but throws an error. Why? export async function POST({ request }) { const data = await request.text(); const json = JSON.parse(data); return new Response(JSON.stringify(json)); }

A request.text() returns a string, so JSON.parse should work fine.

B The request body is empty, so JSON.parse throws an error.

C The request object is missing, causing a runtime error.

D The request body is a stream and must be awaited with request.json() instead.

💡 Hint

Consider what happens if the request body is empty or invalid JSON.

If the request body is empty, request.text() returns an empty string, and JSON.parse('') throws a SyntaxError.

🧠 Conceptual

expert

How does Astro handle multiple HTTP methods in one API route file?

In Astro, if you export multiple functions like GET, POST, and PUT in one API route file, how does Astro handle incoming requests?

A Astro only calls the GET function for all HTTP methods by default.

B Astro calls all exported functions in sequence regardless of HTTP method and merges their responses.

C Astro calls the function matching the HTTP method of the request; if none matches, it returns 405 Method Not Allowed.

D Astro requires separate files for each HTTP method; multiple exports cause an error.

💡 Hint

Think about how REST APIs usually handle different HTTP methods.

Astro matches the HTTP method of the incoming request to the exported function with the same name. If no matching function exists, it returns 405.

Practice

1. What is the main purpose of a server endpoint in Astro?

easy

A. To manage client-side routing

B. To style the website pages

C. To handle incoming HTTP requests and send responses

D. To store user data permanently

Solution

1. Step 1: Understand what server endpoints do

   Server endpoints are designed to receive requests from clients and send back data or responses.

2. Step 2: Differentiate from other roles

   Styling, client routing, and data storage are handled elsewhere, not by server endpoints.

3. Final Answer:

   To handle incoming HTTP requests and send responses -> Option C

4. Quick Check:

   Server endpoints = handle requests [OK]

Hint: Endpoints handle requests and responses, not styling or routing [OK]

Common Mistakes:

• Confusing endpoints with client-side routing
• Thinking endpoints style pages
• Assuming endpoints store data permanently

2. Which of the following is the correct way to export a GET handler in an Astro server endpoint?

easy

A. function get() { return 'Hello' }

B. export async function GET(context) { return new Response('Hello') }

C. export function get() { return 'Hello' }

D. export async GET() { return 'Hello' }

Solution

1. Step 1: Recall Astro endpoint syntax

   Astro expects exported async functions named by HTTP method in uppercase, e.g., GET.

2. Step 2: Check function signature and export

   export async function GET(context) { return new Response('Hello') } correctly exports an async function named GET with a context parameter and returns a Response object.

3. Final Answer:

   export async function GET(context) { return new Response('Hello') } -> Option B

4. Quick Check:

   Export async uppercase method function = export async function GET(context) { return new Response('Hello') } [OK]

Hint: Export async functions named GET/POST in uppercase for endpoints [OK]

Common Mistakes:

• Using lowercase function names
• Not exporting the function
• Missing async keyword
• Returning string instead of Response object

3. Given this Astro endpoint code, what will be the response body when a GET request is made?

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

medium

A. undefined

B. Hi

C. Error: Missing context parameter

D. {"message":"Hi"}

Solution

1. Step 1: Analyze the returned Response object

   The function returns a Response with JSON stringified object { message: 'Hi' } and content-type application/json.

2. Step 2: Determine response body content

   The response body will be the JSON string: {"message":"Hi"} exactly as stringified.

3. Final Answer:

   "{\"message\":\"Hi\"}" -> Option D

4. Quick Check:

   JSON.stringify output = {"message":"Hi"} [OK]

Hint: JSON.stringify returns string, so response body is JSON text [OK]

Common Mistakes:

• Expecting plain text 'Hi' instead of JSON string
• Confusing response body with object
• Thinking context parameter is mandatory

4. What is wrong with this Astro endpoint code?

export function POST(request) {
  const data = await request.json();
  return new Response('Received');
}

medium

A. The function must be async to use await

B. POST should be lowercase

C. request.json() is not a valid method

D. Response must be an object, not a string

Solution

1. Step 1: Check async usage with await

   The function uses await but is not declared async, causing a syntax error.

2. Step 2: Verify other parts

   POST must be uppercase and exported, request.json() is valid, and Response can take a string body.

3. Final Answer:

   The function must be async to use await -> Option A

4. Quick Check:

   Use async with await = The function must be async to use await [OK]

Hint: Use async keyword when using await inside functions [OK]

Common Mistakes:

• Forgetting async keyword with await
• Using lowercase HTTP method names
• Misunderstanding request.json() availability

5. You want to create an Astro server endpoint that accepts a POST request with JSON data containing a "name" field, and responds with a JSON greeting like { "greeting": "Hello, name!" }. Which code snippet correctly implements this?

hard

A. export async function POST({ request }) {
const data = await request.json();
return new Response(JSON.stringify({ greeting: `Hello, ${data.name}!` }), { headers: { 'Content-Type': 'application/json' } });
}

B. export function POST(request) {
const data = request.json();
return new Response({ greeting: 'Hello, ' + data.name + '!' });
}

C. export async function POST(request) {
const data = await request.text();
return new Response(JSON.stringify({ greeting: 'Hello, ' + data + '!' }));
}

D. export async function POST() {
return new Response(JSON.stringify({ greeting: 'Hello!' }));
}

Solution

1. Step 1: Check correct async POST function with destructured request

   export async function POST({ request }) { const data = await request.json(); return new Response(JSON.stringify({ greeting: `Hello, ${data.name}!` }), { headers: { 'Content-Type': 'application/json' } }); } correctly exports async POST with { request } destructured to access request.json().

2. Step 2: Verify JSON parsing and response format

   export async function POST({ request }) { const data = await request.json(); return new Response(JSON.stringify({ greeting: `Hello, ${data.name}!` }), { headers: { 'Content-Type': 'application/json' } }); } awaits request.json(), extracts name, and returns JSON response with proper headers.

3. Final Answer:

   export async function POST({ request }) { const data = await request.json(); return new Response(JSON.stringify({ greeting: `Hello, ${data.name}!` }), { headers: { 'Content-Type': 'application/json' } }); } -> Option A

4. Quick Check:

   Async POST with request.json() and JSON response = export async function POST({ request }) { const data = await request.json(); return new Response(JSON.stringify({ greeting: `Hello, ${data.name}!` }), { headers: { 'Content-Type': 'application/json' } }); } [OK]

Hint: Use async POST with await request.json() and JSON response headers [OK]

Common Mistakes:

• Not awaiting request.json()
• Returning Response with object instead of string
• Missing Content-Type header for JSON
• Not destructuring request parameter