Repeatable group within a repeatable group

Developing with Prismic
1

Hi there,

I am using Slice Machine with Next.js and trying to implement a repeatable group within a repeatable group. My use case is for example a repeatable pricing card (basic, premium etc.) which has a list of repeatable elements (25 users, unlimited API calls etc.).

I saw it was discussed in Request: Nested or grouped repeatable content within slices, but this is basically 1 whole year ago so I am wondering if anything has changed? It seems like the only way to do this is with custom types, but then I am really unsure how to do this with Slice Machine and Next.js, so any help would really be appreciated!

2

@amos This has been something that I've also requested in the past due to some slices from the design requiring multiple nested groups.

For now, you can create a Pricing Tier custom type, then within your slice you can add a "pricingTier" content relationship and link it to the Pricing Tier custom type. You can then query this information using fetchLinks

1 Like
3

Could you elaborate on fetching the information using fetchLinks? Would I do this in the slice itself or the page?

For example, this is my [uid] page:

import { getLayout } from "@/components/Layout";
import resolver from "@/components/SliceResolver";
import SliceZone from "next-slicezone";
import { useGetStaticPaths, useGetStaticProps } from "next-slicezone/hooks";
import { Client } from "../../../prismic-configuration";

const Page = (props: any) => <SliceZone {...props} resolver={resolver} />;

// Fetch content from prismic
// eslint-disable-next-line react-hooks/rules-of-hooks
export const getStaticProps = useGetStaticProps({
  client: Client(),
  apiParams({ params }: any) {
    return {
      uid: params.uid,
    };
  },
});

// eslint-disable-next-line react-hooks/rules-of-hooks
export const getStaticPaths = useGetStaticPaths({
  client: Client(),
  formatPath: (prismicDocument: any) => {
    return {
      params: {
        uid: prismicDocument.uid,
      },
    };
  },
});

Page.getLayout = getLayout;

export default Page;

while a slice looks like

const PricingSlice = ({ slice }) => (
  <Section variant={slice.variation === "default" ? undefined : slice.variation} position="relative">
    ...
  </Section>
);

PricingSlice.displayName = PricingSlice;

export default PricingSlice;
4

@amos Here's an example from my project I'm currently working on:

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

Thanks for the reply @kris, I've managed to get it working! Hopefully they add something more manageable in the future.

1 Like
6

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