Promise Unwrapping, Data Invalidation

+layout.ts
3개의 data 반환

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

interface StockList {
	symbol: string;
	price: number;
}

export const load = (async ({ fetch }) => {
	const url1 = 'http://localhost:5000/most-active-stock';
	const url2 = 'http://localhost:5000/top-gaining-stock';
	const url3 = 'http://localhost:5000/top-losing-stock';
	const res1 = await fetch(url1);
	const res2 = await fetch(url2);
	const res3 = await fetch(url3);
	const result1: StockList = await res1.json();
	const result2: StockList = await res2.json();
	const result3: StockList = await res3.json();

	return {
		result1,
		result2,
		result3,
	};
}) satisfies PageLoad;

+layout.svelte

<script lang="ts">
	import type { PageData } from './$types';

	export let data: PageData;

	console.log(data);
</script>

<div class="grid grid-cols-3">
	<p class="m-2">active: {data.result1.symbol}</p>
	<p class="m-2">gaining: {data.result2.symbol}</p>
	<p class="m-2">losing: {data.result3.symbol}</p>
</div>

<slot><!-- optional fallback --></slot>

+page.ts

depends: 데이터 변환 체크

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

interface Stock {
	[key: string]: { symbol: string; price: number };
}

export const load = (async ({ fetch, depends }) => {
	const url = 'http://localhost:5000/stocks';
	const res = await fetch(url);
	const stocks: Stock[] = await res.json();
	depends('stocks:active');

	return {
		stocks,
	};
}) satisfies PageLoad;

+page.svelte
invalidte : 데이터 변환 시 적용

<script lang="ts">
	import type { PageData } from './$types';
	import { invalidate, invalidateAll } from '$app/navigation';

	export let data: PageData;

	const refresh = (): void => {
		console.log('refresh');
		//	invalidate('stocks:active');
		invalidateAll();

		console.log(invalidateAll());
	};

	const stocks = data.stocks;
</script>

{#each stocks as stock}
	<p>{stock.symbol} - {stock.price}</p>
{/each}

<button type="button" on:click="{refresh}">새로고침</button>

결과 페이지