Server load functions (+page.server.js) in Svelte - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to export a server load function in +page.server.js.

Svelte

export const load = async ([1]) => {
  return { message: 'Hello from server!' };
};

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

Arequest

Bevent

Cparams

Dcontext

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'request' instead of 'event' as the parameter name.

Leaving the parameter empty or missing.

The server load function receives an event object that contains request details.

2fill in blank

medium

Complete the code to access URL search parameters inside the server load function.

Svelte

export const load = async (event) => {
  const id = event.url.[1].get('id');
  return { id };
};

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

Aquery

Bparams

CsearchParams

Dsearch

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'params' which refers to route parameters, not query parameters.

Using 'query' or 'search' which are not valid properties on the URL object.

The url.searchParams property gives access to URL query parameters.

3fill in blank

hard

Fix the error in the server load function to correctly return data.

Svelte

export const load = async (event) => {
  const data = await fetch('/api/data');
  const json = await data.[1]();
  return { json };
};

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

Ajson

Bjsonify

CtoJSON

Dparse

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'jsonify' which is not a method on the Response object.

Using 'toJSON' which is for converting objects to JSON strings.

Using 'parse' which is not a method on the Response object.

The Response object has a json() method to parse JSON data.

4fill in blank

hard

Fill both blanks to destructure parameters and return a custom object in the server load function.

Svelte

export const load = async ([1]) => {
  const { params } = [2];
  return { id: params.id };
};

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

Aevent

Bcontext

Crequest

Durl

Attempts:

3 left

💡 Hint

Common Mistakes

Using different names for the parameter and destructured object.

Using 'context' or 'request' which are not the correct parameter names.

The event object contains params for route parameters.

5fill in blank

hard

Fill all three blanks to fetch data, parse JSON, and return it in the server load function.

Svelte

export const load = async ([1]) => {
  const response = await fetch('/api/items');
  const data = await response.[2]();
  return { [3] };
};

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

Aevent

Bjson

Citems

Ddata

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong parameter names like 'request'.

Using incorrect methods like 'parse' instead of 'json'.

Returning a variable name that was not defined.

The parameter is event, the method to parse JSON is json(), and the returned object uses data.