Here's my code for review
Is this the most efficient way or can i do something better
+page.server.ts
export async function load({ params, fetch, cookies }) {
const client = createClient({ fetch, cookies });
const page = await client.getByUID('errors', params.uid, {
graphQuery: `{
errors {
...errorsFields
causes {
cause {
...causeFields
solutions {
solution {
...solutionFields
}
}
}
}
}
}`
});
console.log('👇👇👇');
console.log(JSON.stringify(page));
console.log('⬆️⬆️⬆️');
return {
page
};
}
+page.svelte
<script lang="ts">
import { PrismicImage, PrismicLink, PrismicRichText, SliceZone } from '@prismicio/svelte';
import { components } from '$lib/slices';
import type { Content } from '@prismicio/client';
let { data } = $props();
const pageData = data.page.data;
const causeAndSolutions = data.page.data.causes.map((cause) => {
/**
* assert typeof causeItem as typescript inferred it as content relationship type...
* and i've actually modified data to include the details with Graph Query in the server.ts file.
*/
const causeItem = cause.cause as unknown as Content.ErrorCauseDocument;
const solutions = causeItem.data.solutions.map((solution) => {
const solutionItem = solution.solution as unknown as Content.ErrorSolutionDocument;
return solutionItem.data;
});
return {
cause: causeItem.data,
solutions
};
});
</script>
<div class="prose prose-lg prose-slate max-w-5xl">
<PrismicRichText field={pageData.title} />
<PrismicRichText field={pageData.description} />
<PrismicImage field={pageData.image} />
{#each causeAndSolutions as { cause, solutions }}
<PrismicRichText field={cause.heading} />
<PrismicRichText field={cause.description} />
{#each solutions as soln}
<PrismicRichText field={soln.heading} />
<PrismicRichText field={soln.description} />
<PrismicRichText field={soln.steps} />
{/each}
{/each}
</div>