Layout load functions in Svelte - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to export a load function in a Svelte layout.

Svelte

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

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

Afetch

Binit

Cstart

Dload

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'fetch' instead of 'load' as the function name.

Forgetting to export the function.

The load function is the correct export name for loading data in a Svelte layout.

2fill in blank

medium

Complete the code to access route parameters inside the load function.

Svelte

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

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

Afetch

Burl

Cparams

Dsession

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'fetch' or 'url' instead of 'params'.

Trying to access parameters directly without destructuring.

The params object contains route parameters like slug.

3fill in blank

hard

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

Svelte

export const load = async () => {
  [1] { user: 'Alice' };
};

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

Aprops:

Breturn

Cprops

Dreturn:

Attempts:

3 left

💡 Hint

Common Mistakes

Omitting the return keyword.

Using incorrect syntax like 'props:' or 'return:'.

The load function must return an object containing the data.

4fill in blank

hard

Fill both blanks to create a load function that fetches JSON data and returns it as props.

Svelte

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

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

Afetch

Bjson

Ctext

Dparams

Attempts:

3 left

💡 Hint

Common Mistakes

Using params instead of fetch in the first blank.

Using text() instead of json() to parse response.

The first blank is fetch to use SvelteKit's enhanced fetch function, and the second blank is json to parse the response.

5fill in blank

hard

Fill all three blanks to create a load function that fetches user data based on an ID parameter and returns it.

Svelte

export const load = async ({ [1] }) => {
  const res = await fetch(`/api/users/${params.[2]`);
  const user = await res.[3]();
  return { user };
};

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

Aparams

Bid

Cjson

Dfetch

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'fetch' instead of 'params' in the first blank.

Using 'params' instead of 'id' in the URL.

Using 'text()' instead of 'json()' to parse the response.

The load function destructures params, uses id from params in the URL, and calls json() to parse the response.