Ts issue with contentrelationship fields

[jankohlbach]

Describe your question/issue in detail

I'm having issues with typescript when using contentrelationship fields when I wan to use them like following:

      <div class="container">
        <div class="grid">
          <h2>{{ item.category.data.title }}</h2>
        </div>
        <div
          v-if="isFilled.contentRelationship(item.category)"
          class="grid"
        >
          <h2>{{ item.category.data.title }}</h2>
        </div>
      </div>

first error is because it could be an empty relationship field:

so I tried to fix that by using isFilled.contentRelationship, but then I get another error that I don't know how to fix/type:

would love to hear ideas how to fix that because I don't want to add every single time, feels hacky

[Phil (Phil Snow)]

Hi @jankohlbach,

We've discussed this previously here and you'll find the solution in that thread

TypeScript Content Relationships in Nuxt

Hey @leopold, Thanks for your patience! I looked into this and I think I might have a solution for you. This is based on a solution that our engineer Angelo developed for typing fetchLinks in Next.js, but I've tested it in Nuxt and it seems to be working. Typically we use the $prismic.isFilled helpers to check if a property exists. However — as you have encountered here — TypeScript doesn't know the structure of the linked data. Angelo wrote a helper to take care of that — isFilledRelatedData(…

Thanks.

[jankohlbach]

hey, that works, amazing
just couldn't find that haha
but feels way better than adding the comments everywhere