Hooks (handle, handleError, handleFetch) in Svelte - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a basic handle hook that logs each request method.

Svelte

export const handle = async ({ event, resolve }) => {
  console.log(event.request.method);
  return await [1](event);
};

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

Aresolve

Bhandle

Cfetch

DhandleFetch

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting to call resolve and returning nothing.

Calling a wrong function like fetch or handleFetch instead of resolve.

The handle hook must call resolve(event) to continue processing the request and generate a response.

2fill in blank

medium

Complete the code to define a handleError hook that logs the error message.

Svelte

export const handleError = ({ error }) => {
  console.error('Error:', [1]);
};

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

Aerror.name

Berror.stack

Cerror.message

Derror.toString()

Attempts:

3 left

💡 Hint

Common Mistakes

Logging the whole error object instead of the message.

Using error.toString() which may include extra info.

The handleError hook receives an error object. Logging error.message shows the error description.

3fill in blank

hard

Fix the error in the handleFetch hook to correctly modify the request headers.

Svelte

export const handleFetch = async ({ request, fetch }) => {
  const newHeaders = new Headers(request.headers);
  newHeaders.set('X-Custom-Header', 'SvelteKit');
  const newRequest = new Request(request.url, {
    method: request.method,
    headers: [1],
    body: request.body
  });
  return fetch(newRequest);
};

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

AnewHeaders

Brequest.headers

Crequest

Dheaders

Attempts:

3 left

💡 Hint

Common Mistakes

Passing the original request.headers which is immutable.

Passing the whole request object instead of headers.

To modify headers, create a new Headers object and pass it as the headers option in the new Request.

4fill in blank

hard

Fill both blanks to create a handle hook that adds a custom header to the response.

Svelte

export const handle = async ({ event, resolve }) => {
  const response = await resolve(event);
  response.headers.[1]('X-Handled-By', [2]);
  return response;
};

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

Aset

B'SvelteKit'

Cappend

D'handle'

Attempts:

3 left

💡 Hint

Common Mistakes

Using append which adds multiple headers instead of replacing.

Passing a variable without quotes for the header value.

The set method adds or replaces a header. The value must be a string, so use 'SvelteKit'.

5fill in blank

hard

Fill all three blanks to create a handleFetch hook that adds an authorization token to outgoing requests.

Svelte

export const handleFetch = async ({ request, fetch }) => {
  const modifiedHeaders = new Headers([1]);
  modifiedHeaders.set('Authorization', [2]);
  const modifiedRequest = new Request(request.url, {
    method: [3],
    headers: modifiedHeaders,
    body: request.body
  });
  return fetch(modifiedRequest);
};

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

Arequest.headers

B'Bearer abc123token'

Crequest.method

Drequest

Attempts:

3 left

💡 Hint

Common Mistakes

Passing the whole request object instead of headers to Headers constructor.

Using a variable without quotes for the token string.

Hardcoding method instead of using request.method.

Start with the original request headers, add the Authorization header with a token string, and keep the original request method.