Middleware patterns with hooks in Svelte - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this Svelte middleware hook?

Consider this SvelteKit handle hook that modifies the response headers. What will the browser receive as the Content-Type header?

Svelte

export async function handle({ event, resolve }) {
  const response = await resolve(event);
  response.headers.set('Content-Type', 'application/json');
  return response;
}

A The response will have no 'Content-Type' header.

B The response will keep the original 'Content-Type' header from the resolved response.

C The response will have 'Content-Type' set to 'application/json'.

D The code will throw a runtime error because headers are immutable.

💡 Hint

Think about whether the response.headers object is mutable and if setting headers after resolve works.

The response object returned by resolve has mutable headers, so setting Content-Type to 'application/json' works and changes the header sent to the browser.

❓ lifecycle

intermediate

In what order do these SvelteKit hooks run during a request?

Given these hooks in hooks.server.js, what is the correct order they execute when a request comes in?

Svelte

export async function handle({ event, resolve }) {
  console.log('handle start');
  const response = await resolve(event);
  console.log('handle end');
  return response;
}

export async function handleFetch({ request, fetch }) {
  console.log('handleFetch');
  return fetch(request);
}

export async function getSession(event) {
  console.log('getSession');
  return { user: null };
}

A 3, 1, 2

B 3, 2, 1

C 1, 3, 2

D 2, 3, 1

💡 Hint

Remember that handle wraps the whole request, handleFetch runs during fetch calls inside handle, and getSession runs after handle.

The handle hook runs first and wraps the request. Inside handle, any fetch calls trigger handleFetch. The getSession hook runs after handle resolves.

🔧 Debug

advanced

Why does this SvelteKit middleware hook cause a runtime error?

Examine this handle hook code. Why does it throw an error when a request is made?

Svelte

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

A Because <code>handle</code> must return a string, not a response object.

B Because <code>headers</code> is a read-only property and cannot be set.

C Because <code>event</code> is missing required properties.

D Because <code>resolve</code> is not awaited, <code>response</code> is a Promise, so <code>headers</code> is undefined.

💡 Hint

Check if resolve returns a Promise and if you need to wait for it.

The resolve function returns a Promise. Without await, response is a Promise object, which does not have a headers property, causing a runtime error.

📝 Syntax

advanced

Which option correctly implements a SvelteKit handle hook that adds a cookie?

Choose the code that correctly adds a cookie named session with value abc123 to the response.

A

export async function handle({ event, resolve }) {
  const response = await resolve(event);
  response.headers['set-cookie'] = 'session=abc123; Path=/; HttpOnly';
  return response;
}

B

export async function handle({ event, resolve }) {
  const response = await resolve(event);
  response.headers.set('set-cookie', 'session=abc123; Path=/; HttpOnly');
  return response;
}

C

export async function handle({ event, resolve }) {
  const response = await resolve(event);
  response.headers.append('set-cookie', 'session=abc123; Path=/; HttpOnly');
  return response;
}

D

export async function handle({ event, resolve }) {
  const response = await resolve(event);
  response.headers.add('set-cookie', 'session=abc123; Path=/; HttpOnly');
  return response;
}

💡 Hint

Check the correct method to set headers on the response object.

The headers object has a set method to set or overwrite headers. append adds another header of the same name, but cookies should be set with set to avoid duplicates. headers is not a plain object, so bracket notation or add method do not work.

❓ state_output

expert

What is the final value of event.locals.user after this middleware chain?

Given these two handle hooks in hooks.server.js, what will event.locals.user be when the request reaches the page?

Svelte

export async function handle({ event, resolve }) {
  event.locals.user = 'guest';
  const response = await resolve(event);
  return response;
}

export async function handle({ event, resolve }) {
  if (event.request.headers.get('authorization') === 'Bearer token123') {
    event.locals.user = 'admin';
  }
  return resolve(event);
}

A The code throws an error due to duplicate handle functions.

B "admin"

C undefined

D "guest"

💡 Hint

Consider how SvelteKit handles multiple handle exports in the same file.

SvelteKit expects only one handle export per hooks.server.js file. Exporting two handle functions causes a syntax or runtime error because of duplicate exports.