Fetch Prismic.io data

[M4TThys123]

• Load data using *Best-Practice`
• Add a Prefetch

[M4TThys123]

Data Fetching/Loading

Bron

Met de load functie kan je data vanuit de +page.js naar de +page.svelte sturen.

+page.svelte

<script>
	export let data;
	console.log(data)
	const { products } = data; 
</script>

<h1>Shop</h1>
{#each products as product}
	<h2>{product.title}</h2>
	<p>{product.description}</p>
{/each}

Best Practice

• Gebruiken bij 1 of meer fetches
• Nu heb je geen waterfall
• fetches worden paralel uitgevoerd.

+page.js

export const load = async ({ fetch }) => {
	// Async Fetch 1
	const fetchProducts = async () => {
		const productRes = await fetch('https://dummyjson.com/products?limit=10');
		const productData = await productRes.json();
		return productData.products;
	};

	// Async Fetch 2
	const fetchUsers = async () => {
		const usersRes = await fetch('https://dummyjson.com/users?limit=10');
		const usersData = await usersRes.json();
		return usersData.users;
	};

	return {
		products: fetchProducts(),
		users: fetchUsers()
	};
};

Bad Practice

• Gebruiken bij 1 of meer fetches

export const load = async ({ fetch }) => {
    // Fetch 1
    const productRes = await fetch ('https://dummyjson.com/products?limit=10')
    const productData = await productRes.json()
    const products = productData.products

    // Fetch 2
    const usersRes = await fetch ('https://dummyjson.com/users?limit=10')
    const usersData = await usersRes.json()
    const users = usersData.users

    return {
        products: products,
        users: users
    }
}

Prefetch

+layout.svelte

Voeg data-sveltekit-prefetch toe aan een <a></a>

<nav>
	<a href="/">Home</a>
	<a href="/shop" **data-sveltekit-prefetch**>Shop</a>
	<a href="/movies" **data-sveltekit-prefetch**>Movies</a>
</nav>