Server endpoints (API routes) in Astro - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a GET endpoint in Astro.

Astro

export async function [1](context) {
  return new Response('Hello from GET!');
}

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

AGET

Bfetch

Cget

Dpost

Attempts:

3 left

💡 Hint

Common Mistakes

Using lowercase method names like 'get' instead of 'GET'.

Using unrelated function names like 'fetch' or 'post' for a GET endpoint.

Astro server endpoints use uppercase HTTP method names like GET to define handlers.

2fill in blank

medium

Complete the code to access the request body in a POST endpoint.

Astro

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

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

Atext

Bjson

CformData

Dbody

Attempts:

3 left

💡 Hint

Common Mistakes

Using request.body directly which is a stream, not parsed data.

Using text() when expecting JSON data.

To read JSON data from the request body, use request.json() which returns a promise resolving to the parsed JSON.

3fill in blank

hard

Fix the error in the endpoint to correctly return JSON with proper headers.

Astro

export async function GET() {
  return new Response(JSON.stringify({ message: 'Hi' }), {
    headers: { 'Content-Type': [1] }
  });
}

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

A'text/html'

B'text/plain'

C'application/xml'

D'application/json'

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'text/plain' or 'text/html' which misleads the client about the data format.

Omitting the Content-Type header entirely.

When returning JSON data, the Content-Type header must be application/json so clients know how to interpret the response.

4fill in blank

hard

Fill both blanks to create an endpoint that responds with a 404 status and a JSON error message.

Astro

export async function GET() {
  return new Response(JSON.stringify({ error: 'Not found' }), {
    status: [1],
    headers: { 'Content-Type': [2] }
  });
}

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

A404

B'application/json'

C'text/plain'

D200

Attempts:

3 left

💡 Hint

Common Mistakes

Using status 200 instead of 404 for errors.

Setting Content-Type to 'text/plain' when sending JSON.

Use status code 404 for 'Not found' errors and set Content-Type to 'application/json' for JSON responses.

5fill in blank

hard

Fill all three blanks to create a POST endpoint that reads JSON, extracts 'name', and returns a greeting.

Astro

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

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

Ajson

Bname

Dtext

Attempts:

3 left

💡 Hint

Common Mistakes

Using request.text() instead of json().

Trying to access a property that doesn't exist or misspelling 'name'.

Not using the extracted name in the response string.

The endpoint reads JSON from the request body using json(), extracts the name property, and returns a greeting using that name.

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