Sveltekit Changes: Load Function

Introduction

In this article i'm going to explain you about new changes in load function of sveltekit framework. How it is changes after sveltekit opted for directory based routing. I already made a summary post of all the breaking changes of sveltekit Sveltekit Braking changes: Routing, Load and new way of shadow endpoints.

New way of defining Load Function

In early days of sveltekit we use to define a extra <script> tag with context=module

// The old Way

<script context="module" lang="ts">
// Your load function goes here.
</script>
<script lang="ts">
// Your client code goes in here for typescript
<script>

// All html here

<style>
// All css here for the page
<style>

which made it weird having two script tags is good for confusing others and there are more useful reasons why sveltekit opted for this.

Now we already have directory based routing that makes things easy for a new thing which is removing script tag from +page.svelte and giving load function it's own space(Everyone loves their personal space) with page.ts. Where you can define your Load function easily.

// The new way inside `+page.ts

+import type { PageLoad } from './$types';

export const load: PageLoad = () => {
  // ...
}

wait wait this is not the only change that they made in Load function. Now they have some spot on better things with Little bit sour ones.

Accessing value, Error handling and Redirect in Load Function

Now, We know that we need a new file(+page.ts) for load function but we don't know how to return the values and access them in our client(+page.svelte).

In this section sveltekit made a good choice to remove props to return. Now you don't have to return things inside a prop now you can return them just return { Sveltekit: 'Release candidate phase' }.

// Old way 
export function load() {
  return {
     props: {
          answer: 42
     }
  };
}

// New way
// +page.ts
export function load() {
  return {
  answer: 42
  };
}

I know you liked it.

Now we come to the part how to access this returned value inside our +page.svelte. It's very easy thing now, you have to add a new line in your +page.svelte's script tag export let data;. That's all now you can use all the data from load function. There is one more method to access data from load function which is using $page store of sveltekit. This have all the data related to your current page. Just do $page.data and this will give you all data we got from load function.

// Method 1 inside +page.svelte
<script>
export let data
</script>

<h1> {data.answer} </h1> <!-- 42: value returned from load -->

// Method 2 inside +page.svelte
<script>
  import { page } from '$app/stores';
<script>

<h1> {$page.data.answer} </h1> <!-- 42: value returned from load -->

Both methods works perfectly and can be used as per your satisfaction.

• Now throwing error is easy as blaming someone else for your error.

+import { error } from '@sveltejs/kit';
export function load() {
  throw error(400, 'not found');
}

Yup this will give a 400 to user. Error function takes two values. First, status code of error and second is message to be shown.

• Redirects same as errors.

+import { redirect } from '@sveltejs/kit';
export function load() {
  throw redirect(302, '/');
}

As error, redirects takes two parameters, first is status code and route on which user will be redirected.

That's all we need to cover in load function. If i left something let me know.

This is me writing for you. If you wanna ask or suggest anything please put it in comment.