Why SvelteKit handles full-stack routing - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a SvelteKit page component that exports a load function.

Svelte

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

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

Acomponent

Bserver

Cclient

Dbrowser

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'client' instead of 'server' for the load function context.

The load function runs on the server in SvelteKit, enabling full-stack routing.

2fill in blank

medium

Complete the code to define a SvelteKit endpoint that handles GET requests.

Svelte

export async function [1]() {
  return {
    status: 200,
    body: { message: 'Hello from API!' }
  };
}

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

ADELETE

BPUT

CPOST

DGET

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'POST' instead of 'GET' for fetching data.

The GET function handles GET requests in SvelteKit endpoints.

3fill in blank

hard

Fix the error in the SvelteKit route file to correctly export the POST handler.

Svelte

export async function [1](request) {
  const data = await request.json();
  return {
    status: 201,
    body: { received: data }
  };
}

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

Aload

BGET

CPOST

Dfetch

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'GET' or 'load' instead of 'POST' for POST requests.

The POST handler must be exported as POST to handle POST requests in SvelteKit.

4fill in blank

hard

Fill both blanks to create a SvelteKit page that fetches data from an endpoint and displays it.

Svelte

<script>
  import { onMount } from 'svelte';
  let message = '';
  onMount(async () => {
    const res = await fetch('/api/message');
    const data = await res.[1]();
    message = data.[2];
  });
</script>

<p>{message}</p>

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

Ajson

Btext

Cmessage

Dbody

Attempts:

3 left

💡 Hint

Common Mistakes

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

Accessing a wrong property name from the data.

Use json() to parse the response and access the message property from the data.

5fill in blank

hard

Fill all three blanks to define a SvelteKit endpoint that handles POST requests and returns JSON.

Svelte

export async function [1](request) {
  const data = await request.[2]();
  return {
    status: 200,
    headers: { 'Content-Type': '[3]' },
    body: { success: true, received: data }
  };
}

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

APOST

Bjson

Capplication/json

DGET

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'GET' instead of 'POST' for the handler.

Calling 'text()' instead of 'json()' on the request.

Setting wrong or missing content type header.

The POST handler uses request.json() to parse JSON data and returns a JSON response with the correct content type.