# Sveltkit: Fetching global data in Slices

**URL:** <https://community.prismic.io/t/sveltkit-fetching-global-data-in-slices/15042>\
**Category:** Developing with Prismic\
**Tags:** svelte, custom-types-api\
**Created:** [January 24, 2024, 3:51pm UTC](https://community.prismic.io/t/sveltkit-fetching-global-data-in-slices/15042 "2024-01-24T15:51:45Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![janisgaudreault.jg](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/janisgaudreault.jg/32/6889_2.png) [@janisgaudreault.jg](https://community.prismic.io/u/janisgaudreault.jg)\
**Post date:** [January 24, 2024, 3:51pm UTC](https://community.prismic.io/t/sveltkit-fetching-global-data-in-slices/15042/1 "2024-01-24T15:51:46Z")

</div>

I am using SvelteKit in conjunction with Prismic at the company where I work, with SvelteKit being the primary technology in our stack. As a junior developer, I'm aware that I have much to learn. Prismic integration for SvelteKit has been available for about three months, yet there are only two basic tutorial videos on YouTube. The documentation is decent, yet it sometimes lacks detailed explanations.

I'm currently facing a challenge: I'm trying to understand how to import information from a custom type into my slice. I have an 'articles' slice with its main data (`slice`), but I'm struggling to import linked articles into it. So far, I haven't found any examples demonstrating how to do this in the `index.svelte` file for the articles slice.

My question revolves around routing. I've used `"src/routes/+layout.server.js"` to call my custom types for the navigation and footer, integrating them into my main layout. However, I'm uncertain about how to fetch articles using `const documents = await client.getAllByType('article')` and link this to the `"src/lib/slices/Articles/index.svelte"` file.

As a beginner, I hope my query doesn't come across as too naive. Given that Prismic's integration with SvelteKit is relatively new, finding comprehensive documentation or examples, especially for SvelteKit, has been challenging.

---

<div class="post-metadata">

**Author:** ![samlittlefair](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/samlittlefair/32/696_2.png) [@samlittlefair](https://community.prismic.io/u/samlittlefair)\
**Post date:** [January 25, 2024, 4:35pm UTC](https://community.prismic.io/t/sveltkit-fetching-global-data-in-slices/15042/3 "2024-01-25T16:35:03Z")

</div>

Hi Janis,

That's a great question, and Svelte offers a straightforward way to handle it:

```auto
// src/lib/slices/Example/index.svelte

<script>
  import { page } from "$app/stores"

  export let slice
</script>

<pre>
  {JSON.stringify($page, null, 2)}
</pre>

```

`$page` will contain all of the data that you have fetched in your `+page.server.js` file and any `+layout.server.js` file.

Let me know if you still have any questions.

Sam

---

<div class="post-metadata">

**Author:** ![janisgaudreault.jg](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/janisgaudreault.jg/32/6889_2.png) [@janisgaudreault.jg](https://community.prismic.io/u/janisgaudreault.jg)\
**Post date:** [February 5, 2024, 4:38pm UTC](https://community.prismic.io/t/sveltkit-fetching-global-data-in-slices/15042/6 "2024-02-05T16:38:47Z")

</div>

But I have an article custom-type related to my Articles slice. My Question is, how can I make my articles show up in my Article slice? I have been stuck on this question for too long, no documentation helps out.

------------------------src\lib\slices\Actualites\index.svelte---------------------------------

```auto
<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>
	</div>

</section>

```

----------------src\routes[[preview=preview]]+page.server.js------------------

```auto
import { asText } from '@prismicio/client';

import { createClient } from '$lib/prismicio';

// @ts-ignore
export async function load({ fetch, cookies }) {
	const client = createClient({ fetch, cookies });

	const page = await client.getByUID('page', 'home');
	const articles = await client.getAllByType('articles');

	return {
		articles,
		page,
		title: asText(page.data.title),
		meta_description: page.data.meta_description,
		meta_title: page.data.meta_title,
		meta_image: page.data.meta_image.url
	};
}

export function entries() {
	return [{}];
}

```

-----------------------src\routes[[preview=preview]]+page.server.js---------------------------

```auto
import { asText } from '@prismicio/client';

import { createClient } from '$lib/prismicio';

// @ts-ignore
export async function load({ fetch, cookies }) {
	const client = createClient({ fetch, cookies });

	const page = await client.getByUID('page', 'home');
	const articles = await client.getAllByType('articles');

	return {
		articles,
		page,
		title: asText(page.data.title),
		meta_description: page.data.meta_description,
		meta_title: page.data.meta_title,
		meta_image: page.data.meta_image.url
	};
}

export function entries() {
	return [{}];
}

```

-------------------------------Console.log on my slice --------------------------------------

## ![Capture d’écran 2024-02-05 113645](https://europe1.discourse-cdn.com/flex013/uploads/prismic/original/2X/1/1a2b6347c05ee31d01f1af28898ede837cfed213.png)

 ![Capture d’écran 2024-02-06 102244](https://europe1.discourse-cdn.com/flex013/uploads/prismic/original/2X/9/9d570f627be2e6c11ebe3cada7bef88ad885aefc.png)  
 ![Capture d’écran 2024-02-06 102322](https://europe1.discourse-cdn.com/flex013/uploads/prismic/original/2X/9/97fb56c9f13e1a4d03215340be68d41b01bcf8da.png)

---

<div class="post-metadata">

**Author:** ![samlittlefair](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/samlittlefair/32/696_2.png) [@samlittlefair](https://community.prismic.io/u/samlittlefair)\
**Post date:** [February 7, 2024, 5:39pm UTC](https://community.prismic.io/t/sveltkit-fetching-global-data-in-slices/15042/8 "2024-02-07T17:39:46Z")

</div>

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:

```auto

<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:

```auto
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:

```auto
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:

```auto

<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

---

<div class="post-metadata">

**Author:** ![janisgaudreault.jg](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/janisgaudreault.jg/32/6889_2.png) [@janisgaudreault.jg](https://community.prismic.io/u/janisgaudreault.jg)\
**Post date:** [February 7, 2024, 6:41pm UTC](https://community.prismic.io/t/sveltkit-fetching-global-data-in-slices/15042/10 "2024-02-07T18:41:06Z")

</div>

Thank you! I got confused with another solution from a different post. The initial solution works! Thank you very much!

[https://community.prismic.io/t/re-get-all-custom-types-object-from-content-relationship-inside-a-slice-sveltekit/15188/2](https://community.prismic.io/t/re-get-all-custom-types-object-from-content-relationship-inside-a-slice-sveltekit/15188/2)

---

<div class="post-metadata">

**Author:** ![samlittlefair](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/samlittlefair/32/696_2.png) [@samlittlefair](https://community.prismic.io/u/samlittlefair)\
**Post date:** [February 8, 2024, 2:13pm UTC](https://community.prismic.io/t/sveltkit-fetching-global-data-in-slices/15042/11 "2024-02-08T14:13:34Z")

</div>

Awesome! I'm happy it works 🙂

Be sure to post a link to your project when it's finished! We'd love to see how it turns out.

---

<div class="post-metadata">

**Author:** ![janisgaudreault.jg](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/janisgaudreault.jg/32/6889_2.png) [@janisgaudreault.jg](https://community.prismic.io/u/janisgaudreault.jg)\
**Post date:** [February 8, 2024, 3:08pm UTC](https://community.prismic.io/t/sveltkit-fetching-global-data-in-slices/15042/12 "2024-02-08T15:08:24Z")

</div>

Will do, building my company's website! 🙂