TypeScript Content Relationships in Nuxt

Developing with Prismic
, ,
1

There are some threads about similar issues, but I still wanted to post.

The following template code (Vue/Nuxt) gives me the error below. Could I use some helper function in the template code to fix this? isFilled? Thanks in advance.

              <ComponentLegalClause
                v-else-if="slice.slice_type === 'legal_clause' && slice.primary.clause"
                :structured-text-field="slice.primary.clause.data.text"
              />

Property 'data' does not exist on type 'ContentRelationshipField<"legal_clause">'.
  Property 'data' does not exist on type 'EmptyLinkField<"Document">'.
5

Hi @leopold. I think you might be right that this could be fixed with something like isFilled. Did you give that a try? Did it work for you?

7

Yes, I've played around with using isFilled.

<ComponentLegalClause
  v-else-if="
    slice.slice_type === 'legal_clause' &&
    isFilled.contentRelationship(slice.primary.clause)
  "
  :structured-text-field="slice.primary.clause.data.text"
  class="standard-article__slice-legal-clause"
/>

'slice.primary.clause.data' is of type 'unknown'.

I could add some type assertion, but I am not sure that's the best way to go about it.

8

Hey Leopold,

It looks like you're using fetchLinks, graphQuery, or GraphQL? If so, you'll need to type the content relationship manually. Let me know if you need help with that and I can ask our resident Nuxt expert (though I think she's away on vacation currently).

Sam

9

Thanks. Yes, I am using fetchLinks in my query. Not using graphQuery, or GraphQL.

I would love to have some more information on how to type the content relationship manually. It should be done in the content query itself, right?

10

Okay, I'll look into this and get back to you next week.

12

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() — which you can see here:

https://community.prismic.io/t/content-relationship-types-within-another-content-relationship-in-a-slice/13866/2

I got that working like this:

  <h2
    v-if="
      $prismic.isFilled.contentRelationship(page?.data.tag) &&
      isFilledRelatedData(page?.data.tag, 'tag', 'title')
    "
  >
    {{ page?.data.tag.data.title }}
  </h2>

It seems to be working for me. Give it a try and let me know if that takes care of your type error.

Sam