Documentation

Let's see how Dashboard project is structured:

ShipDotnet.Dashboard/src/routes/(private)

profile
roles
...

If we were to add products we would create a products slice:

products
	/api
		index.ts
	/types
		index.ts
	+page.svelte

ShipDotnet.Dashboard/src/routes/(private)/products/types/index.ts

export interface Product {
	id: number;
	name: string;
	description: string;
}

Let's define how we are going to call the API:

ShipDotnet.Dashboard/src/routes/(private)/products/api/index.ts

import { ApiBuilder } from '$lib/services/apiBuilder';
import type { Product } from '../types';

export * from '../types';

const GET_ENDPOINT = 'products.getById';

export const apiGetItem = async (id: number): Promise<Product> => {

	const apiBuilder = new ApiBuilder();

	const url = `${GET_ENDPOINT}.${id}`;

	return await apiBuilder
		.withEndpoint(url)
		.withAuth()
		.execute<Product>();
};

Now this can be easily used in your page file:

ShipDotnet.Dashboard/src/routes/(private)/products/+page.svelte

< script lang="ts">
	import { page } from '$app/stores';
	import { onMount } from 'svelte';
	import { PageLoader } from '$lib/components/layout';
	import { setFullWidthPage } from '$lib/stores/full-width-page';
	import { getParamterFromPageUrl } from '$lib/utils/url';
	import type { Product } from './types';
	import { apiGetItem } from './api';

	let product: Product | null = null;
	$: product = product;

	onMount(async () => {
		const id = getParamterFromPageUrl('id', $page);
		product = await apiGetItem(id);
	});

	setFullWidthPage(false);
</>

<div>
	{#if product}
		<div class="mb-6 flex items-center">
			<h1 class="ml-4 line-clamp-1 pb-2 text-4xl">{product?.name}</h1>
		</div>
		<div class="rounded-lg border border p-4 shadow-sm">
			<p class="mb-2"><strong>Description:</strong></p>
			<p class="mb-2">
				{product?.description}
			</p>
		</div>
	{:else}
		<PageLoader />
	{/if}
</div>