Sveltekit Braking changes: Routing, Load Function and new way of shadow endpoints
Tags: webdev, sveltekit, tutorial, svelte
Published: 2022-08-18 18:26:00

This article going to explain all the breaking changes sveltekit just made this month. Yeah i know it's little bit crazy for big projects and I also had problems that's why I'm writing this post.

This all starts with migrations to new svelte version. You can check [Github discussion](https://github.com/sveltejs/kit/discussions/5774) where they have explained `how to migrate`.

**List of changes**

- Routes are directory based now.
- Load function props removed and return all the values and access them using data prop.
- Access all page data from page store.


**Routes**

Now sveltekit have introduced directory based routing earlier it was file-System based routing. Now you have a directory and which contains three different files in every route. Those files are +page.svelte, +page.js, +page.server.js, we will deep dive in every file. Here, I'm taking an example where my route is `blog`.

- blog/+page.svelte
```javascript
<!--blog/+page.svelte-->

This page going to contain all the html css and js 
frontend handling from now on there will be no `script` 
tag with `module`. Which will also make our code more readable.

<h1>About this site</h1>
<p>TODO...</p>
<a href="/">Home</a>
```

- blog/+page.js

```javascript
<!--blog/+page.js-->

Here you going to add your load function which will be called 
on route rendering. Which basically means load have a 
new separate file for itself.

This will be used to export values that configure the 
page's behaviour:

- export const prerender = true or false
 overrides config.kit.prerender.default
- export const hydrate = true or false 
overrides config.kit.browser.hydrate
- export const router = true or false 
overrides config.kit.browser.router


import { error } from '@sveltejs/kit';
 
/** @type {import('./$types').PageLoad} */
export function load({ params }) {
  if (params.slug === 'hello-world') {
    return {
      title: 'Hello world!',
      content: 'Welcome to our blog. Lorem ipsum 
dolor sit amet...'
    };
  }
 
  throw error(404, 'Not found');
}
```

- blog/+page.server.js

```javascript
<!--blog/+page.server.js-->

This is your new way of shadow endpoints. You can write 
your server side code here with all the request methods. 


src/routes/blog/[slug]/+page.server.js
import { error } from '@sveltejs/kit';
 
/** @type {import('./$types').PageServerLoad} */
export async function load({ params }) {
  const post = await getPostFromDatabase(params.slug);
 
  if (post) {
    return post;
  }
 
  throw error(404, 'Not found');
}

```

**Load function**

As load function got changed and added to file (+page.js) now  you can return multiple props without added props property in return.

```javascript

// +page.js

/** @type {import('./$types').LayoutLoad} */
export function load() {
  return {
    sections: [
      { slug: 'profile', title: 'Profile' },
      { slug: 'notifications', title: 'Notifications' }
    ]
  };
}

// +page.svelte

<script>
  /** @type {import('./$types').PageData} */
  export let data;
</script>

{#each data.sections as section}
<h1>{section.slug}</h1>
<div>{section.title}</div>
{/each}
```

As you can see you have returned multiple things in load without props and you can use `data` prop to access all the data returned from load function. 

**Page Store**

This made many things easy and sometimes tedious. It depends where you gonna use. This store have all the data for e.g. url, data, errors and etc.

```Javascript 
<script>
  import { page } from '$app/stores';
</script>

<h1>{$page.status}: {$page.error.message}</h1>
```

As you can see we imported our page from app store and used it to get status and error message.


These are the some specific breaking changes and if i have left anything just mention them in comments. For more information check out [SvelteKit Docs](https://kit.svelte.dev/docs/routing).

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