GET, POST, PUT, DELETE handlers in Svelte - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this Svelte GET handler?

Consider this SvelteKit GET handler code. What JSON response will the client receive?

Svelte

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

A {"message":"Hello from POST"}

B {"message":"Hello from GET"}

C SyntaxError: Unexpected token

D {"error":"Not found"}

💡 Hint

Look at the returned JSON string inside the Response.

The GET handler returns a JSON response with the message 'Hello from GET'.

❓ state_output

intermediate

What happens after this POST handler runs?

This SvelteKit POST handler receives JSON data and returns a modified response. What is the output JSON?

Svelte

export async function POST({ request }) {
  const data = await request.json();
  return new Response(JSON.stringify({ received: data.text.toUpperCase() }), {
    headers: { 'Content-Type': 'application/json' }
  });
}

A {"received":"HELLO"}

B {"received":"hello"}

C TypeError: Cannot read property 'toUpperCase' of undefined

D {"error":"Invalid data"}

💡 Hint

The handler converts the 'text' field to uppercase.

The POST handler reads JSON, converts 'text' to uppercase, and returns it under 'received'.

📝 Syntax

advanced

Which PUT handler code is syntactically correct?

Choose the correct SvelteKit PUT handler syntax that updates a resource and returns status 204.

A

export async function PUT(request) {
  const data = await request.json();
  return new Response(null, { status: 204 });
}

B

export async function PUT({ request }) {
  const data = request.json();
  return new Response(null, { status: 204 });
}

C

export async function PUT({ request }) {
  const data = await request.json();
  // update logic here
  return new Response(null, { status: 204 });
}

D

export async function PUT({ request }) {
  const data = await request.json();
  return Response(null, { status: 204 });
}

💡 Hint

Check for correct parameter destructuring and await usage.

Option C correctly destructures the parameter, awaits JSON parsing, and returns Response with status 204.

🔧 Debug

advanced

Why does this DELETE handler cause a runtime error?

This SvelteKit DELETE handler throws an error. Identify the cause.

Svelte

export async function DELETE({ params }) {
  const id = params.id;
  if (!id) {
    return new Response('Missing ID', { status: 400 });
  }
  await database.delete(id);
  return new Response(null, { status: 204 });
}

A The handler returns status 204 but should return 200

B database.delete is not awaited properly causing unhandled promise rejection

C Response constructor is missing required body argument

D params is undefined because the handler lacks the correct route parameter setup

💡 Hint

Check if params is available in the handler context.

If the route does not define an [id] parameter, params.id is undefined causing errors.

🧠 Conceptual

expert

Which HTTP method handler should you use to partially update a resource in SvelteKit?

You want to update only some fields of a resource without replacing it entirely. Which handler method is best practice?

A PATCH handler

B PUT handler

C POST handler

D DELETE handler

💡 Hint

Consider HTTP methods semantics for partial updates.

PATCH is the HTTP method designed for partial updates of resources.