GET, POST, PUT, DELETE handlers in Svelte - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a GET handler in SvelteKit.

Svelte

export async function GET({ params }) {
  const data = await fetch('/api/data');
  const json = await data.[1]();
  return new Response(JSON.stringify(json));
}

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

Ablob

Btext

Cjson

DformData

Attempts:

3 left

💡 Hint

Common Mistakes

Using text() instead of json() causes the data to be a string, not an object.

Using blob() or formData() is for other data types, not JSON.

The json() method parses the response body as JSON, which is needed to handle JSON data in a GET request.

2fill in blank

medium

Complete the code to handle a POST request that reads JSON data from the request body.

Svelte

export async function POST({ request }) {
  const body = await request.[1]();
  // process body
  return new Response('Created', { status: 201 });
}

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

Atext

Bjson

CformData

Dblob

Attempts:

3 left

💡 Hint

Common Mistakes

Using text() returns a string, not parsed JSON.

Using formData() is for form submissions, not JSON.

The json() method reads the request body and parses it as JSON, which is needed to handle JSON POST data.

3fill in blank

hard

Fix the error in the PUT handler to correctly parse JSON from the request body.

Svelte

export async function PUT({ request }) {
  const data = await request.[1]();
  // update resource with data
  return new Response('Updated', { status: 200 });
}

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

Atext

Bblob

CformData

Djson

Attempts:

3 left

💡 Hint

Common Mistakes

Using text() causes the data to be a string, which is not directly usable.

Using formData() or blob() is incorrect for JSON data.

To update data sent as JSON, the json() method must be used to parse the request body.

4fill in blank

hard

Fill both blanks to create a DELETE handler that returns a 204 No Content response.

Svelte

export async function DELETE({ params }) {
  // delete resource identified by params.id
  return new Response(null, { status: [1] });
}

// The status code [2] means no content is returned.

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

A204

B404

C200

D500

Attempts:

3 left

💡 Hint

Common Mistakes

Using 200 returns OK but usually expects content.

Using 404 means resource not found, which is an error here.

Using 500 means server error, which is incorrect.

Status code 204 means the request was successful but there is no content to return, which is standard for DELETE responses.

5fill in blank

hard

Fill all three blanks to create a POST handler that reads JSON, processes it, and returns a JSON response with status 201.

Svelte

export async function POST({ request }) {
  const data = await request.[1]();
  const result = { message: 'Received', received: data };
  return new Response(JSON.stringify(result), {
    status: [2],
    headers: { 'Content-Type': [3] }
  });
}

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

Atext

B201

C'application/json'

Djson

Attempts:

3 left

💡 Hint

Common Mistakes

Using text() instead of json() causes parsing errors.

Using status 200 instead of 201 is less precise for creation.

Forgetting to set Content-Type header causes client confusion.

The request body is parsed as JSON using json(). The response status 201 means created. The content type header must be 'application/json' to indicate JSON response.

Practice

1. In SvelteKit, what is the main purpose of a GET handler in a route's +server.js file?

easy

A. To update existing data on the server

B. To delete data from the server

C. To fetch and return data when the route is requested

D. To send data to the server without expecting a response

Solution

1. Step 1: Understand the role of HTTP methods

   GET requests are used to retrieve data from a server without changing it.

2. Step 2: Apply this to SvelteKit handlers

   The GET handler in +server.js responds to GET requests by returning data to the client.

3. Final Answer:

   To fetch and return data when the route is requested -> Option C

4. Quick Check:

   GET handler fetches data = B [OK]

Hint: GET handlers always return data for reading [OK]

Common Mistakes:

• Confusing GET with POST or PUT for data updates
• Thinking GET modifies server data
• Assuming GET sends data without response

2. Which of the following is the correct syntax to define a POST handler in SvelteKit's +server.js file?

easy

A. export async function POST({ request }) { return new Response('ok'); }

B. export async function post(request) { return new Response('ok'); }

C. export function Post(request) { return 'ok'; }

D. async function POST() { return 'ok'; }

Solution

1. Step 1: Recall SvelteKit handler naming conventions

   Handlers must be exported async functions named in uppercase: GET, POST, PUT, DELETE.

2. Step 2: Check parameter and return type

   The function receives an object with a request property and returns a Response object.

3. Final Answer:

   export async function POST({ request }) { return new Response('ok'); } -> Option A

4. Quick Check:

   Correct handler syntax = A [OK]

Hint: Use uppercase method names and destructured params [OK]

Common Mistakes:

• Using lowercase function names like 'post'
• Not exporting the function
• Returning plain strings instead of Response objects

3. Given this SvelteKit PUT handler in +server.js:

export async function PUT({ request }) {
  const data = await request.json();
  return new Response(JSON.stringify({ updated: data.id }), { status: 200 });
}

What will be the response body if the client sends {"id": 42} in the request body?

medium

A. undefined

B. {"id":42}

C. 42

D. {"updated":42}

Solution

1. Step 1: Parse JSON from request

   The handler reads JSON from the request body, so data = { id: 42 }.

2. Step 2: Return JSON with updated id

   The response body is JSON stringified object with key 'updated' and value data.id (42).

3. Final Answer:

   {"updated":42} -> Option D

4. Quick Check:

   Response JSON includes updated id = D [OK]

Hint: PUT returns updated data wrapped in JSON [OK]

Common Mistakes:

• Returning original data instead of updated key
• Not stringifying JSON response
• Confusing response body with request body

4. Identify the error in this DELETE handler code snippet:

export async function DELETE(request) {
  const id = await request.json().id;
  return new Response(`Deleted ${id}`, { status: 200 });
}

medium

A. The function parameter should be destructured to get request

B. Cannot await request.json().id directly; must await request.json() first

C. DELETE handlers cannot return Response objects

D. Missing export keyword before function

Solution

1. Step 1: Analyze request.json() usage

   request.json() returns a Promise for the parsed body; you must await it fully before accessing properties.

2. Step 2: Identify incorrect await usage

   Code tries to await request.json().id directly, which is invalid; must await request.json() first, then access .id.

3. Final Answer:

   Cannot await request.json().id directly; must await request.json() first -> Option B

4. Quick Check:

   Await full JSON before property access = C [OK]

Hint: Await request.json() fully before accessing properties [OK]

Common Mistakes:

• Trying to await a property of a Promise
• Not destructuring the parameter (optional but recommended)
• Thinking DELETE handlers can't return Response

5. You want to create a SvelteKit API route that updates a user's name using a PUT handler and returns the updated user object. Which code snippet correctly implements this behavior?

hard

A. export async function PUT({ request }) {
const user = await request.json();
user.name = user.name.toUpperCase();
return new Response(JSON.stringify(user), { status: 200 });
}

B. export async function PUT(request) {
const user = await request.json();
user.name = user.name.toUpperCase();
return user;
}

C. export async function put({ request }) {
const user = await request.json();
user.name = user.name.toUpperCase();
return new Response(JSON.stringify(user));
}

D. export async function PUT({ request }) {
const user = request.json();
user.name = user.name.toUpperCase();
return new Response(JSON.stringify(user), { status: 200 });
}

Solution

1. Step 1: Confirm correct function signature and export

   The handler must be exported async function named PUT with destructured { request } parameter.

2. Step 2: Await request.json() and modify data

   Await the JSON body, then update the user.name property correctly.

3. Step 3: Return a Response with JSON string and status

   Return new Response with JSON stringified user and status 200.

4. Final Answer:

   export async function PUT({ request }) { const user = await request.json(); user.name = user.name.toUpperCase(); return new Response(JSON.stringify(user), { status: 200 }); } -> Option A

5. Quick Check:

   Proper async PUT handler with Response = A [OK]

Hint: Use uppercase function name, await JSON, return Response [OK]

Common Mistakes:

• Not awaiting request.json()
• Using lowercase function name 'put'
• Returning raw object instead of Response