SvelteKit - How to Convert Sapper to Svelte

6 replies
Last updated: Aug 15, 2021
Hi Everyone!
I’m cuttin’ my chops on SvelteKit +
Sanity.io . I’m going through a simple blog tutorial that was written for Sapper and trying to convert it to Svelte.
I can see my Sanity Query data when I run a log however it’s not populating to the site. Any thoughts? Code:


<!-- sanity-md/web/src/routes/blog/index.svelte -->

<script context="module" lang="ts">

import { client } from '../../components/SanityClient';


export async function load() {

const query = "*[_type == 'post']{_id, slug, title}";

const posts = await client.fetch(query);

console.log(posts);

return { posts };

}

</script>


<script lang="ts">

type Slug = {

_type: string;

current: string;

};

export let posts: { slug: Slug; title: string }[] = [];

</script>


<h1>Recent posts</h1>

<ul>

{#each posts as _post_, _i_}

<li>Example:<a rel="prefetch" href="blog/{_post_.slug.current}">{_post_.title}</a></li>

{/each}

</ul>
Aug 15, 2021, 7:52 PM
Nice Geoff! That was it.
Aug 15, 2021, 9:15 PM
So that ensures that it’s a prop?
Aug 15, 2021, 9:15 PM
The API changed between Sapper’s
preload()
and SvelteKit’s
load()
, so instead of returning props directly,
load()
returns a
props
object.
Aug 15, 2021, 9:18 PM
The API changed between Sapper’s
preload()
and SvelteKit’s
load()
, so instead of returning props directly,
load()
returns a
props
object.
Aug 15, 2021, 9:18 PM
Ahhh, I caught the load part. Missed the rest.
I’m certain another scenario like this is right around the corner. Thanks for the help on this one.
Aug 15, 2021, 9:19 PM
Any time!
Aug 15, 2021, 9:19 PM

Sanity.io – build remarkable experiences at scale

Sanity is a customizable solution that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Categorized in