Fetch linked items with the JS API

Developing with Prismic
1

Hi there,

I am trying to fetch my linked documents with the JS api. I saw the documentation post here Fetch Data with Vanilla JavaScript - Prismic but unfortunately it doesn't quite help.

What I am trying to achieve is the following:

I have a content type on which an editor can choose "recommendations" and link to two articles of the same content type that will be rendered in our frontend as teasers.

In our code, I would like to get the information (e.g. image, description etc.) of those linked items. It worked well with GraphQL but we're switching to the JS Api and I just can't get it to work.

So my current implementation looks like something like this:

export async function jsApiCall(
uid: string,
lang: string,
) {
const client = PrismicClient
const response = await client.query(
Prismic.Predicates.at('my.CONTENT_TYPE.uid', uid),
{ lang, fetchLinks: 'CONTENT_TYPE.recommendations.single_recommendation' },
)

return response?.results?.[0]
}

I used the recomendations.single_recommendation query because our custom type looks like this:

2020-06-17_1019
2020-06-17_1019808Ă—510 24.9 KB

How would a proper query look like using the JS API when I want to query linked items of the SAME content type?

Thanks!

2

Hi @andreas.kratzel, I think the issue here is that you’re specifying the API ID of the Content Relationship field.

The way fetchLinks works is that you need to instead specify the API ID of the fields you want from your linked document.

So let’s say you’re linking to a type named article and want to retrieve the featured_image and description fields. The options would look like this:

{ fetchLinks: ['article.featured_image', 'article.description'] }

You will likely need to change this to match the API ID of your Custom Type and fields, but it will look like that.

1 Like