How to query the documents inside of a Single type

Developing with Prismic
1

Hello,

I have a repeatable type with the API ID of "hero_images" and in it I have a lot of documents. I also have a single type with the API ID of "hero_section" and inside it I added several "hero_images" documents. I'd like to query prismic and obtain the "hero_images" that I added to "hero_section". The way I have this working currently is that I use the following:

const ids = [];
client.query(Prismic.Predicates.at("document.type", "hero_section")).then(function (response) {
    const doc = response.results[0];
    for (let hero_image of doc.data.hero_images) {
        ids.push(hero_image.hero_image.id);
    }
});

When I retrieve the data from the "hero_section", I only get IDs for the "hero_images" that are added to it, and not the contents of the "hero_images". So I add all the ids to an array and then I use the following:

const fetchData = async () => {
    const response = await client.getByIDs(ids);
    if (response) {
        console.log(response);
    }
};
fetchData();

This seems to work pretty well, but I'm confused if this is the correct approach or not because sometimes I get a 400 error in console.

I'm a new with Prismic and a bit confused, code examples would be very useful.
Thanks in advance!

3

Hello @stefanplc,

Thank you for reaching out to us.

I need one clarification for your question. How did you add 'hero_images' in 'hero_section', like the image field or the link to document?

I am looking forward to hearing back from you.

Thanks,
Priyanka

4

Hey @Priyanka, thank you for your reply!

The "hero_images" are added to the "hero_section" as a links to the documents. So if I go to the Custom Types page in my dashboard, I can see the custom type "hero_images" which is of the "repeatable" type and it has 3 documents in it and those are grabbed and displayed inside "hero_section". The idea here is that at some point, the "hero_images" repeatable might have 10-15 images, but we only want 3 or 4 to be visible on the website so we only take the ones we want, put them in "hero_section" and then query that to grab the ones we would like to show.

Thanks!

5

Hello @stefanplc

Thanks for the detail.

In that case, you need fetchLinks to retrieve a specific content field from a linked document and add it to the document response object.

Here is the documentation related to it.

Let me know if you have further questions.

Thanks,

Priyanka