Use relationship data in slice machine (nextjs)

Hey everyone

So I know that the nextjs slicemachine is still in beta and this might not have a (clean) solution yet.

I'm trying to create nested relationships to children

slice.data.custom_type.data

Unfortunately, I can't see a way to resolve this. The nextjs docs point to the fetchlinks page, but this uses a different approach to fetching data than if you use nextjs slicemachines.

This topic mentions a params option on <SliceZone>, but that appears to be vue only - it's the same issue otherwise however

How would I go about fetching child relationship data using nextjs and slicemachines?

I had a similar issue with NextJS unfortunately fetchLinks has never worked for me so far.

As an alternative, when I get the whole document, I can get access to the child relationship UID, I then simply use the GetByUID query to get the data from the child.

Thanks! Would you mind showing me an example of what this might look like?

Yes of course.

I don't know what is your use case but this can apply to multiple areas of your nextJS app.

Consider the following

On my GetStaticProps function, I already have my uid from getStaticPaths context, so in the following I am fetching the page:

export async function getStaticProps({
    preview,
    previewData,
    params,
    locale,
    locales,
}) {
    const client = Client();
    const doc =
        await client.getByUID(
            "page",
            params.product,
            {lang: locale}
        );
}

(note that I am using "locale" because my app is translated but you can omit this part if you have only one language)

From there I have my whole document (Page) available, with its nested relation (category).
So I would simply refetch a second time but with the variables from my doc const.

const category = await client.getByUID("category", doc?.data?.category?.uid, {lang: locale})

And then I return this in my props to make it available in my component, you will have the content for both the category and the page itself.

Unfortunately I'm not entirely sure how to incorporate your suggestion into the suggested approach (by Prismic) to create pages with NextJS.

Here's how my getStaticProps query looks right now

export const getStaticProps = useGetStaticProps({
  client: Client(),
  type: "blog_post",
  apiParams({ params }) {
    return {
      uid: params.uid,
    };
  },
});

This is based on their slicemachines walkthrough, but as far as I can tell it doesn't accept other params (I've been playing with it but can't find a way to make it do what we need).

I love slicemachines but I often find when working with prismic features that the wind is taken out of my sails due to incomplete/outdated/poorly structured documentation. :sob:

@dan What's the problem with using fetchLinks? Check out my /pages/[uid].js query - I have pricing-tier custom type relationship in one of my slices

export const getStaticProps: GetStaticProps = useGetStaticProps({
  client: Client(),
  queryType: "repeat",
  type: "page",
  apiParams({ params }) {
    return {
      fetchLinks: [
        "pricing-tier.name",
        "pricing-tier.interval",
        "pricing-tier.description",
        "pricing-tier.features",
        "pricing-tier.ctaText",
        "pricing-tier.ctaLink",
      ],
      uid: params.uid,
    };
  },
});

That's perfect, thank you! I couldn't figure out what actually needed to accept fetchLinks, which is why I couldn't get it to work.

The docs don't mention that this can be passed to apiParams, or even what can be passed to apiParams except.

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.