Repeatable Links with a ghost item

[cerrutti (Sergio Cerrutti)]

Hi there,

First of all, this issue is not related to the common issue about slice.items arrays starting with an empty item inside instead of zero length, since that is not happening in repeatable links.

I've found an empty repeatable link returning a non-empty array, but it's only in one place. I think some item was there before, but after remove that link, the link item persisted with "type: Any" and a key, but it should be deleted.

The problem here is your method "isFilled(LinkField)" is not working in this case, so I have an empty div out there alone with no purpose.

As a workaround, I extended your method to first check for Repeatable emptiness, and also to check this empty ghost links.

import {
  type LinkField,
  type Repeatable,
  isFilled
} from '@prismicio/client'

const isRepeatableLinkFilled = (links: Repeatable<LinkField>) => {
  return links.length > 0 && isFilled.link(links[0]) && links[0].url
}

Thank you in advance.

[angeloashmore]

Hi @cerrutti, thanks for sharing all of those details.

In your screenshot, the "Links" field has an empty link item in it. You can delete it by clicking the "…" button and selecting "Delete":

@prismicio/client includes a helper to check if a repeatable field (like your repeatable link field) is empty: isFilled.repeatable(). You'll still need to check if each item in the repeatable field is filled, as there are times where some fields are filled and others are not.

This is how I recommend checking if a repeatable field is filled and if an individual item is filled (assuming Next.js and a slice named "Example"):

import { Content, isFilled } from "@prismicio/client";
import { SliceComponentProps } from "@prismicio/react";
import { PrismicNextLink } from "@prismicio/next";

type ExampleProps = SliceComponentProps<Content.ExampleSlice>

function Example(props: ExampleProps) {
  return (
    <section>
      {isFilled.repeatable(slice.primary.links) && (
        <ul>
          {slice.primary.links.map(
            (link) =>
              isFilled.link(link) && (
                <li key={link.url}>
                  <PrismicNextLink field={link} />
                </li>
              ),
          )}
        </ul>
      )}
    </section>
  );
}

The code renders a <section>, only renders a <ul> if the repeatable link field has at least one item (whether or not those items are filled), and only renders an individual link with <li> if the link is filled.