Sveltkit: Fetching global data in Slices

Developing with Prismic
,
8

HI Janis,

Thanks for your patience and your follow-up. If you want to programmatically display the most recently updated articles from your website, you can do something like this:


<script>
	import { page } from '$app/stores'
 
	import SectionTitle from '$lib/components/typo/SectionTitle.svelte';

	/** @type {import("@prismicio/client").Content.ActualitesSlice} */
	export let slice;

</script>

<section
	data-slice-type={slice.slice_type}
	data-slice-variation={slice.variation}
	id={slice.primary.section_id}
	class="bg-white md:px-8 lg:px-14 2xl:px-20"
>
	<div class="h-[100px] flex items-center justify-around">
		<SectionTitle>
			{slice.primary.title}
		</SectionTitle>
		{#each $page.data.articles as article}
			<article>
				{article.id} // Template your article here
			</article>
		{/each}
	</div>

</section>

This will use the data from your +page.server.js file, where you query:

const articles = await client.getAllByType('articles');

However, based on your model it looks like you want to manually choose articles for each Slice. If that's the case, then you're on the right track. You just need to add a fetchLinks property to your API configuration in prismicio.js to retrieve the article content. That might look like this:

export const createClient = ({ cookies, ...config } = {}) => {
	const client = prismic.createClient(repositoryName, {
		routes,
		defaultParams: {
			fetchLinks: ["article.title", "article.description"] // Select all the properties you want here
		},
		...config
	});

	enableAutoPreviews({ client, cookies });

	return client;
};

However, fetchLinks will only fetch the first block of a rich text field. If you need multiple blocks from a rich text field, you should look into the more powerful graphQuery option.

Then you could adjust your slice like this:


<script>
	import SectionTitle from '$lib/components/typo/SectionTitle.svelte';

	/** @type {import("@prismicio/client").Content.ActualitesSlice} */
	export let slice;

</script>

<section
	data-slice-type={slice.slice_type}
	data-slice-variation={slice.variation}
	id={slice.primary.section_id}
	class="bg-white md:px-8 lg:px-14 2xl:px-20"
>
	<div class="h-[100px] flex items-center justify-around">
		<SectionTitle>
			{slice.primary.title}
		</SectionTitle>
		{#each slice.items as article}
			<article>
				{article.article.title} // Template your article here
			</article>
		{/each}
	</div>

</section>

(I haven't tested the above code snippets, so there may be issues.)

I hope this helps!

Sam