use strapi client, use locals for strapi url

src/routes/blog/+page.server.ts

@@ -1,89 +1,39 @@
 import { env } from '$env/dynamic/private';
+import { strapi } from '@strapi/client';
 import type { PageServerLoad } from './$types';
 
-type Dates = {
-	createdAt: string;
-	updateAt: string;
-	publishedAt: string;
-};
+export const load: PageServerLoad = async ({ locals }) => {
+	const { Strapi } = locals;
 
-interface BlogPost extends Dates {
-	id: number;
-	documentId: string;
-	Title: string;
-	Header: Image;
-	Body: string;
-	Topics: Topic[];
-}
+	const client = strapi({
+		baseURL: Strapi.url,
+		auth: env.STRAPI_TOKEN
+	});
 
-interface Topic {
-	id: number;
-	Topic: string;
-}
+	const blogs = client.collection('blogs');
 
-interface ImageFormat {
-	ext: string;
-	url: string;
-	hash: string;
-	mime: string;
-	name: string;
-	path: unknown;
-	size: number;
-	width: number;
-	height: number;
-	sizeInBytes: number;
-}
-
-interface Image extends Dates {
-	id: number;
-	documentId: string;
-	name: string;
-	alternativeText: string | null;
-	caption: string | null;
-	width: string;
-	height: string;
-	formats: {
-		large: ImageFormat;
-		medium: ImageFormat;
-		small: ImageFormat;
-		thumbnail: ImageFormat;
-	};
-	hash: string;
-	ext: string;
-	mime: string;
-	size: number;
-	url: string;
-	previewUrl: string | null;
-	provider: string;
-	provider_metadata: unknown | null;
-}
-
-interface Meta {
-	pagingation: {
-		page: number;
-		pageSize: number;
-		pageCount: number;
-		total: number;
-	};
-}
-
-export const load: PageServerLoad = async () => {
-	const response = await fetch(
-		`http://${env.STRAPI_HOST}:${env.STRAPI_PORT}/api/blogs?populate=Header&populate=Topics`,
-		{
-			method: 'GET',
-			headers: {
-				Authorization: `bearer ${env.STRAPI_TOKEN}`
-			}
-		}
-	);
-
-	const { data, meta }: { data: BlogPost[]; meta: Meta } = await response.json();
-
-	console.log(JSON.stringify(data, null, 2));
+	const { data, meta } = await blogs.find({
+		populate: ['Header', 'Topics']
+	});
 
 	return {
-		posts: data,
+		strapi: {
+			url: Strapi.url
+		},
+		posts: data.map((post) => ({
+			id: post.documentId,
+			image: {
+				url: `${Strapi.url}${post.Header.formats.medium.url}`,
+				alt: post.Header.alternativeText
+			},
+			title: post.Title,
+			body: post.Body,
+			topics: post.Topics.map((topic: { id: string; Topic: string }) => ({
+				id: topic.id,
+				name: topic.Topic
+			})),
+			published: post.publishedAt
+		})),
 		meta
 	};
 };

src/routes/blog/+page.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { env } from '$env/dynamic/public';
 	import BlogCard from '$lib/components/BlogCard.svelte';
 	import type { PageProps } from './$types';
 
@@ -15,12 +14,12 @@
 <div class="mx-auto grid gap-8 px-3 py-3 sm:px-8 sm:py-4 lg:grid-cols-2">
 	{#each posts as post (post.id)}
 		<BlogCard
-			documentId={post.documentId}
-			img={`${env.PUBLIC_STRAPI_HOST}${post.Header.formats.medium.url}`}
-			img-alt={post.Header.alternativeText}
-			title={post.Title}
-			published={post.publishedAt}
-			topics={post.Topics}
+			id={post.id}
+			img={post.image.url}
+			img-alt={post.image.alt}
+			title={post.title}
+			published={post.published}
+			topics={post.topics}
 		/>
 	{/each}
 </div>

src/routes/blog/[slug]/+page.server.ts

@@ -1,24 +1,37 @@
 import { env } from '$env/dynamic/private';
+import { strapi } from '@strapi/client';
 import type { PageServerLoad } from './$types';
 
-export const load: PageServerLoad = async ({ params }) => {
+export const load: PageServerLoad = async ({ locals, params }) => {
 	const { slug } = params;
-	const response = await fetch(
-		`http://${env.STRAPI_HOST}:${env.STRAPI_PORT}/api/blogs/${slug}?populate=Header&populate=Topics`,
-		{
-			method: 'GET',
-			headers: {
-				Authorization: `bearer ${env.STRAPI_TOKEN}`
-			}
-		}
-	);
+	const { Strapi } = locals;
 
-	const { data, meta } = await response.json();
+	const client = strapi({
+		baseURL: Strapi.url,
+		auth: env.STRAPI_TOKEN
+	});
 
-	console.log(JSON.stringify(data, null, 2));
+	const blogs = client.collection('blogs');
+
+	const { data: post, meta } = await blogs.findOne(slug, {
+		populate: ['Header', 'Topics']
+	});
 
 	return {
-		post: data,
+		post: {
+			id: post.documentId,
+			image: {
+				url: `${Strapi.url}${post.Header.url}`,
+				alt: post.Header.alternativeText
+			},
+			title: post.Title,
+			body: post.Body,
+			topics: post.Topics.map((topic: { id: string; Topic: string }) => ({
+				id: topic.id,
+				name: topic.Topic
+			})),
+			published: post.publishedAt
+		},
 		meta
 	};
 };

src/routes/blog/[slug]/+page.svelte

@@ -11,16 +11,16 @@
 
 <div class="flex flex-col items-center gap-4">
 	<div class="w-full max-w-5xl px-4">
-		<p class="text-gray-500">{dayjs(post.createdAt).format('DD MMMM YYYY')}</p>
-		<h1 class="text-4xl font-light">{post.Title}</h1>
+		<p class="text-gray-500">{dayjs(post.published).format('DD MMMM YYYY')}</p>
+		<h1 class="text-4xl font-light">{post.title}</h1>
 	</div>
 	<img
 		class="aspect-4/2 w-full object-cover"
-		src={`${env.PUBLIC_STRAPI_HOST}${post.Header.formats.medium.url}`}
-		alt={post.Header.alternativeText}
+		src={`${env.PUBLIC_STRAPI_HOST}${post.image.url}`}
+		alt={post.image.alt}
 	/>
 	<div class="w-full max-w-5xl px-4">
-		{#await compile(post.Body)}
+		{#await compile(post.body)}
 			<div class="skeleton h-48 w-full"></div>
 		{:then content}
 			<!-- eslint-disable-next-line svelte/no-at-html-tags -->