Hello,
I'm new to Prismic.io and I have a problem when developing a test website in SvelteKit.
I created a slice called "selectedServiced" where I can select services from a list of custom types "services". The issue I have is that when I get the slice object in my index.svelte, I only have the id and the uid but I need the other fields too (images,...).
I saw on other similar topics that I have to fetch it using graphquery but I tried in index.svelte and I can't seem to make it work.
All I could manage to do is using client.getAllByType('services') in my +page.server.jsfrom the homepage but I don't know how to transfer that data to the proper slice either..
Thank you :)
Hey Dimitri,
Thanks for this question! I would recommend fetchLinks instead of graphQuery. fetchLinks will fetch the additional properties from the linked documents. In your prismicio.js file, add fetchLinks to your client initialization:
export const createClient = ({ cookies, ...config } = {}) => {
const client = prismic.createClient(repositoryName, {
routes,
fetchLinks: [
"service.image", // The name of the type and the name of the field
"service.other_field" // Add as many fields as you need
],
...config
});
enableAutoPreviews({ client, cookies });
return client;
};
Let me know if that helps!
Sam
Thank you Sam for your reply.
I think I get what it's supposed to do but how can I retrieve the fetchLinks data in my slice from the index.svelte?
Okay, let's say that you have a Slice like this:
<script>
export let slice
</script>
<h1>{slice.primary.example_key_text}</h1>
If that slice has a content relationship field to a service document, you might access the linked data like this:
<script>
export let slice
</script>
<h1>{slice.primary.example_key_text}</h1>
<p>{slice.primary.example_content_relationship.data.image}</p>
If your config includes a fetchLinks option like this:
fetchLinks: [
"service.image",
"service.other_field"
],
Then your API client will ask Prismic to always append the image and other_field properties in a data object to any content relationship fields that link to a service document. Does that make sense?
Sam
I've tried what you said earlier, I don't know why but I don't see any data field in my object when I console.log slice.
Even when I copy/paste your snippet and change the ids in my CMS.. Here is a recap of the console.log, the custom type and the config I have:
prismicio.js:
export const createClient = ({ cookies, ...config } = {}) => {
const client = prismic.createClient(repositoryName, {
routes,
fetchLinks: [
'services.image', // The name of the type and the name of the field
'services.icon' // Add as many fields as you need
],
...config
});
enableAutoPreviews({ client, cookies });
return client;
};
Custom type:
Console.log:
I understood the concept of fetchlinks, I think I am missing something here
but I don't see what.
A weird thing is that when I add fetchlink to my config I have this error when I hover the red underline on fetchlink:
No overload matches this call.
Overload 1 of 2, '(repositoryNameOrEndpoint: string, options?: ClientConfig | undefined): Client<AllDocumentTypes>', gave the following error.
Object literal may only specify known properties, and 'fetchLinks' does not exist in type 'ClientConfig'.
Overload 2 of 2, '(repositoryNameOrEndpoint: string, options?: ClientConfig | undefined): Client<PrismicDocument<Record<string, any>, string, string>>', gave the following error.
Object literal may only specify known properties, and 'fetchLinks' does not exist in type 'ClientConfig'.ts(2769)
Hi Dimitri,
Sorry, I think that's my mistake. fetchLinks should be inside an defaultParams object:
const client = prismic.createClient(repositoryName, {
routes,
defaultParams: {
fetchLinks: [
'services.image', // The name of the type and the name of the field
'services.icon' // Add as many fields as you need
],
},
...config
})
Let me know if that gets things working for you.
Sam
1 Like
