Loading Data

Svelte routes can export a load function from the module script. This function is used to fetch and add context data for the current page.

<script context="module">
  export const pattern = '/:id(\d+)/';

  export function load ({params, fetch, publicData}) {
    const response = await fetch(`https://example/api/${params.id}`);
    const data = response.json();
    publicData.user = {
      name: `${data.firstName} ${data.lastName}`
    };
  }
</script>

Child components do not have a load function but they can access the same global context for the page they’re used.

The load function receives an object with the properties:

params

An object of any URL Pattern matches.

fetch

A function that proxies the global fetch allowing relative URLs to be handled by middleware and not remotely. URLs prefixed with ORIGIN are also handled internally (see environment variables).

publicData

An object to read and assign context data.

serverData

An object to read and assign context data.

Advanced Properties

Properties from platform in advanced routes are also available.

Return value

The load function can return an optional Response. This replaces the Svelte template which is never rendered.