Help with access data of custom type in a relationship field in a group field

Developing with Prismic
, , ,
3

Thank you so much @nf_mastroianni! fetchLinks worked for me.

Yes I meant a "repeatable zone" instead of a "group field".

I also managed to solve the TypeScript errors by casting the ContentRelationshipField. And adding a type check by asking if the Field is empty.

/**
 * Props for `CompanyGrid`.
 */
export type CompanyGridProps = SliceComponentProps<Content.CompanyGridSlice>

/**
 * Grid item component.
 */
const GridItem = ({ item }: { item: ContentRelationshipField<'company'> }) => {
  if (!isFilled.contentRelationship(item)) return null

  const { name, logo } = item.data as CompanyDocumentData

  return (
    <Box>
      <PrismicNextImage field={logo} fallbackAlt="" />
      <Heading as="h3">{name}</Heading>
    </Box>
  )
}

/**
 * Component for "CompanyGrid" Slices.
 */
const CompanyGrid = ({ slice }: CompanyGridProps): JSX.Element => {
  return (
    <Section
      data-slice-type={slice.slice_type}
      data-slice-variation={slice.variation}
    >
      <Container>
        <SectionHeadline
          title={slice.primary.title}
          headline={slice.primary.headline}
          hasArrow
        />
        <Grid columns={[1, null, 2]} gap={4}>
          {slice.items.map(({ company }, index) => (
            <GridItem key={index} item={company} />
          ))}
        </Grid>
      </Container>
    </Section>
  )
}