Sveltekit Changes: Load Function
Tags: webdev, javascript, svelte, sveltekit
Published: 2022-09-13 18:23:01

## 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](https://dev.to/theether0/sveltekit-breaking-changes-explaination-18im).

## New way of defining Load Function

In early days of sveltekit we use to define a extra `<script>` tag with `context=module` 
```typescript 
// 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.

```typescript 
// 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' }`.

```typescript 
// 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.

```typescript 
// 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. 

```typescript 
+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.

```typescript 
+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.