Hooks (handle, handleError, handleFetch) in Svelte - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of the handle hook in SvelteKit?

The handle hook lets you run code for every request before it reaches your routes. You can modify the request or response, add headers, or run authentication checks.

beginner

How does the handleError hook help in SvelteKit applications?

The handleError hook catches errors that happen during requests. It lets you log errors or show custom error messages to users in a friendly way.

intermediate

What is the role of the handleFetch hook in SvelteKit?

The handleFetch hook lets you intercept and modify fetch requests made during server-side rendering. You can add headers, change URLs, or mock responses.

beginner

Where do you define the handle, handleError, and handleFetch hooks in a SvelteKit project?

You define these hooks inside the src/hooks.server.js or src/hooks.server.ts file. This file runs on the server for all requests.

intermediate

Can the handleFetch hook modify fetch requests made from the client side in SvelteKit?

No, handleFetch only affects fetch requests made during server-side rendering or load functions on the server. Client-side fetches are not intercepted by this hook.

Which hook in SvelteKit runs before every request to modify the request or response?

A handle

B handleError

C handleFetch

D onMount

The handle hook runs before every request and can modify the request or response.

What is the main use of the handleError hook?

A To catch and handle errors during requests

B To run code after the response is sent

C To intercept fetch requests

D To modify client-side events

handleError is used to catch and handle errors during requests.

Where do you place the hooks like handle and handleFetch in a SvelteKit project?

A src/routes/hooks.js

B src/hooks.server.js

C src/lib/hooks.js

D static/hooks.js

Hooks are defined in src/hooks.server.js or src/hooks.server.ts.

Which hook allows you to modify fetch requests during server-side rendering?

A handleError

B handle

C onDestroy

D handleFetch

handleFetch lets you modify fetch requests during server-side rendering.

Can handleFetch modify fetch requests made from the browser after the page loads?

A Yes, always

B Only if enabled in config

C No, only server-side fetches

D Only for POST requests

handleFetch only affects fetches made on the server, not client-side fetches.

Explain how the handle hook works in SvelteKit and give an example of when you might use it.

Think about what you want to do before your app handles a user request.

Describe the difference between handleError and handleFetch hooks in SvelteKit.

One deals with problems, the other with data fetching.

Practice

1. What is the main purpose of the handle hook in SvelteKit?

easy

A. To catch and handle errors during server-side rendering

B. To define client-side event handlers for UI elements

C. To intercept and modify fetch requests made by the app

D. To manage and modify incoming requests and outgoing responses

Solution

1. Step 1: Understand the role of handle hook

   The handle hook runs on every request and can modify the request or response.

2. Step 2: Compare with other hooks

   handleError is for errors, handleFetch is for fetch interception, so they don't manage requests/responses directly.

3. Final Answer:

   To manage and modify incoming requests and outgoing responses -> Option D

4. Quick Check:

   handle = manage requests/responses [OK]

Hint: Remember: handle = request/response management [OK]

Common Mistakes:

• Confusing handle with handleError
• Thinking handleFetch manages requests directly
• Assuming handle is for client-side events

2. Which of the following is the correct syntax to define a handleError hook in hooks.server.js?

easy

A. export function handleError({ request, response }) { return response; }

B. export async function handleError(event) { console.error(event.error); }

C. export function handleError({ error, event }) { return { message: error.message }; }

D. export function handleError({ fetch, event }) { return fetch(event); }

Solution

1. Step 1: Recall handleError parameters

   The handleError hook receives an object with error and event.

2. Step 2: Check syntax correctness

   export function handleError({ error, event }) { return { message: error.message }; } correctly destructures { error, event } and returns an object with a message.

3. Final Answer:

   export function handleError({ error, event }) { return { message: error.message }; } -> Option C

4. Quick Check:

   handleError({ error, event }) correct syntax [OK]

Hint: handleError gets { error, event } object [OK]

Common Mistakes:

• Using wrong parameters like request or fetch
• Not destructuring the error object
• Returning response instead of error info

3. Given this handleFetch hook, what will be logged when the app fetches /api/data?

export async function handleFetch({ request, fetch }) {
  console.log('Fetching:', request.url);
  const response = await fetch(request);
  return response;
}

medium

A. Fetching: http://localhost/api/data

B. Fetching: /api/data

C. Fetching: undefined

D. No output logged

Solution

1. Step 1: Understand handleFetch parameters

   The request object has a full URL in its url property.

2. Step 2: Analyze the console.log statement

   The code logs 'Fetching:' plus the full request.url, which includes the origin like 'http://localhost/api/data'.

3. Final Answer:

   Fetching: http://localhost/api/data -> Option A

4. Quick Check:

   request.url logs full URL [OK]

Hint: request.url in handleFetch is full URL [OK]

Common Mistakes:

• Expecting only path instead of full URL
• Thinking request.url is undefined
• Assuming no console output

4. Identify the error in this handle hook code snippet:

export async function handle({ event, resolve }) {
  const response = await resolve(event);
  response.headers.set('X-Custom', 'value');
  return response;
}

medium

A. Cannot modify headers on the response object directly; it is immutable

B. Missing await before resolve(event)

C. Incorrect parameter names; should be { request, resolve }

D. handle hook must be synchronous, not async

Solution

1. Step 1: Check response header modification

   The response object is immutable; headers cannot be set directly on it.

2. Step 2: Confirm other parts are correct

   Await is used correctly, parameter names are valid, and handle can be async.

3. Final Answer:

   Cannot modify headers on the response object directly; it is immutable -> Option A

4. Quick Check:

   Response headers are immutable [OK]

Hint: Response headers are immutable; clone before modifying [OK]

Common Mistakes:

• Trying to set headers directly on response
• Confusing parameter names
• Thinking handle must be synchronous

5. You want to add a custom header X-User with the username from event.locals.user to every fetch request made by your app. Which handleFetch hook implementation correctly achieves this?

hard

A. export async function handleFetch({ request, fetch }) {
request.headers.set('X-User', event.locals.user);
return fetch(request);
}

B. export async function handleFetch({ request, fetch, event }) {
const modifiedRequest = new Request(request, {
headers: { ...Object.fromEntries(request.headers), 'X-User': event.locals.user }
});
return fetch(modifiedRequest);
}

C. export async function handleFetch({ request, fetch, event }) {
request.headers.append('X-User', event.locals.user);
return fetch(request);
}

D. export async function handleFetch({ request, fetch, event }) {
const headers = new Headers(request.headers);
headers.set('X-User', event.locals.user);
const modifiedRequest = new Request(request.url, { method: request.method, headers });
return fetch(modifiedRequest);
}

Solution

1. Step 1: Understand immutability of request headers

   Request headers are immutable; to modify them, create a new Request with new headers while preserving other properties like body.

2. Step 2: Analyze the correct implementation

   The code that uses new Request(request, { headers: { ...Object.fromEntries(request.headers), 'X-User': event.locals.user } }) clones the original request fully (including body, method, etc.) and overrides the headers correctly.

3. Step 3: Identify errors in other options

   Directly modifying request.headers with set or append fails because headers are immutable. Creating a new Request with only url, method, and headers omits the body and other request properties.

4. Final Answer:

   export async function handleFetch({ request, fetch, event }) { const modifiedRequest = new Request(request, { headers: { ...Object.fromEntries(request.headers), 'X-User': event.locals.user } }); return fetch(modifiedRequest); } -> Option B

5. Quick Check:

   new Request(request, { headers: ... }) clones fully [OK]

Hint: Clone request with new Request(request, { headers: updated }) [OK]

Common Mistakes:

• Modifying headers directly on original request
• Not cloning request before changing headers
• Omitting request body when recreating Request