How to query customType data in a Slice

Developing with Prismic
1

Im using Nextjs and I have a slice which creates an array of data from a customType in a slice using content relationship field.

I get the content relationship field data from slice, but where i'm struggling is then querying data based on testimonial.id inside the slice as I can't seem to use getStaticProps in a slice, like I would in other components.

{
    "variation": "default",
    "version": "sktwi1xtmkfgx8626",
    "items": [
        {
            "testimonial": {
                "id": "ZZgprBEAAKUjpPat",
                "type": "testimonials",
                "tags": [],
                "lang": "en-gb",
                "slug": "-",
                "first_publication_date": "2024-01-05T16:09:19+0000",
                "last_publication_date": "2024-01-05T16:09:19+0000",
                "link_type": "Document",
                "isBroken": false
            }
        },
        {
            "testimonial": {
                "id": "ZZgprBEAAKUjpPat",
                "type": "testimonials",
                "tags": [],
                "lang": "en-gb",
                "slug": "-",
                "first_publication_date": "2024-01-05T16:09:19+0000",
                "last_publication_date": "2024-01-05T16:09:19+0000",
                "link_type": "Document",
                "isBroken": false
            }
        }
    ],
    "primary": {},
    "id": "testimonial_carousel$61c8c74e-d0cc-4093-b7dc-b969fc48c020",
    "slice_type": "testimonial_carousel",
    "slice_label": null
}

What i want is to be able to query the testimonials custom type based on the IDs in the array from the slice, then display all returned data in the slice; title, author company etc.

In a page component I normal do something like this which would give me all the customtype data for each ID queried in featuredWork:

export async function getServerSideProps({ previewData }: Index) {
    const client = createClient({ previewData });
    const page = await client.getSingle('homepage');
    const getFeaturedWork = page.data.featured_work_list.map((work: DocumentSelect) => work.select.id);
    const featuredWork = await client.getAllByIDs(getFeaturedWork);

    return {
        props: {
            featuredWork,
        },
    };
}
2

For anyone interested i've worked out a solution.

Added a useEffect and added the query there. Don't know why this didn't occur to me earlier !

:any just added for testing :slight_smile:

useEffect(() => {
        const fetchData = async () => {
            const client = createClient();
            const getIds = slice.items.map((item: any) => item.testimonial.id);
            const testimonialsData = await client.getAllByIDs(getIds);
            console.log('testimonialsData', testimonialsData);
        };

        fetchData();
    }, []);

Returns

[
    {
       ...
        "data": {
            "quote": [
                {
                    "type": "paragraph",
                    "text": "test quote",
                    "spans": [],
                    "direction": "ltr"
                }
            ],
            "author": "test author",
            "company": "test company"
        }
    },
    {
        ...
        "data": {
            "quote": [
                {
                    "type": "paragraph",
                    "text": "test 2",
                    "spans": [],
                    "direction": "ltr"
                }
            ],
            "author": "test 2",
            "company": "test 2"
        }
    }
]
1 Like
3

you could also use the fetchLinks option in your query to get the additional data of testimonials, something like:

  const homepage = await client.getSingle("homepage", {
    fetchLinks: [
      "testimonial.title",
      "testimonial.author",
      "testimonial.company",
    ],
  });

this way you can get the data server-side instead of on the client

1 Like
4

Thanks for the reply @john-mantas.

Wouldn't this approach only work if querying data from a customType and not a slice? As the data is being returned from a slice content relation ship field, i'm not sure this approach would work, unless i'm missing something?

5

@luke1 Yes, the fetchLinks options will have to be on your page component, where you query for the slices. Using this option you tell prismic to include the additional data for the linked documents in just one call (for example at the client.getSingle("homepage");) instead of having to make a separate one.

1 Like
6

Thanks for clarifying @john-mantas. Found the docs on this here and was wondering how you deal with data that being fetched that may not exist. For example the data being called from the slice may or may not be there. How would you account for this in the query?

8

Hey Luke,

Just jumping in to say that GraphQuery will not return any errors if the data for a Slice isn't there, as long as the Slice model is included in the Custom Type of the linked document.

10

Hi @luke1, if there are no data then the fields will be undefined or null, you can use the isFilled helper from @prismicio/helpers package to easily check if each field has a value.

1 Like