GET, POST, PUT, DELETE handlers in Svelte

Introduction

These handlers let your Svelte app talk to servers to get, send, update, or delete data.

When you want to fetch data from a server to show on your page.

When a user submits a form and you want to save that data.

When you need to update existing information on the server.

When you want to remove data from the server.

Syntax

Svelte

export async function GET(event) {
  // handle GET request
}

export async function POST(event) {
  // handle POST request
}

export async function PUT(event) {
  // handle PUT request
}

export async function DELETE(event) {
  // handle DELETE request
}

Each function handles one HTTP method.

Use event to access request details like body or URL.

Examples

This responds to GET requests with a simple message.

Svelte

export async function GET(event) {
  return new Response('Hello from GET!');
}

This reads JSON data sent in a POST request and replies with it.

Svelte

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

This handles updating data sent via PUT.

Svelte

export async function PUT(event) {
  const data = await event.request.json();
  // pretend to update data
  return new Response('Data updated');
}

This handles deleting data on DELETE requests.

Svelte

export async function DELETE(event) {
  // pretend to delete data
  return new Response('Data deleted');
}

Sample Program

This Svelte module handles all four main HTTP methods. Each function returns a simple text response showing it worked.

Svelte

export async function GET(event) {
  return new Response('This is a GET response');
}

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

export async function PUT(event) {
  const data = await event.request.json();
  return new Response('PUT request processed');
}

export async function DELETE(event) {
  return new Response('DELETE request processed');
}

Important Notes

Always return a Response object from each handler.

Use await event.request.json() to read JSON data sent by the client.

These handlers run on the server side in SvelteKit endpoints or +server.js files.

Summary

GET, POST, PUT, DELETE handlers let your app communicate with servers.

Each handler is an async function that returns a Response.

Use them to fetch, send, update, or delete data in your Svelte apps.

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