TS Types for usePrismicText

Developing with Prismic
,
1

I have a hard time figuring out the TS configuration for this function. It works like a charm though.

import { usePrismicText } from '@prismicio/vue'
import type { TitleField, RichTextField } from '@prismicio/types'
export default function (titleField: TitleField | RichTextField) {
  if (usePrismicText({ field: titleField }).text.value.length > 0) {
    return usePrismicText({ field: titleField }).text.value
  } else {
    return null
  }
}

Screenshot 2023-10-20 at 16.08.53
Screenshot 2023-10-20 at 16.08.533560×834 240 KB

This is a Nuxt 3 project.

3

Hey @leopold thanks for reaching out!

I have trouble reproducing your issue on the latest version of @nuxtjs/prismic (3.0.3), providing the latest @prismicio/vue (4.1.0) and @prismicio/client (7.3.1)

image
image1086×400 49.8 KB

I suspect this is due to an old version of @prismicio/types you're using. @prismicio/types has been deprecated in favor of @prismicio/client at the beginning of this Summer. All its types are now exposed through @prismicio/client. This change was made to reduce the amount of type mismatch issues like the one you're experiencing above.

To fix it, ensure you're running our SDKs' latest version. You can run the following to update them:

npm update @nuxtjs/prismic @prismicio/vue @prismicio/client

Then, the updated snippet should be looking something like this (with just the import changed):

import { usePrismicText } from '@prismicio/vue'
import type { TitleField, RichTextField } from '@prismicio/client'
export default function (titleField: TitleField | RichTextField) {
	if (usePrismicText({ field: titleField }).text.value.length > 0) {
		return usePrismicText({ field: titleField }).text.value
	} else {
		return null
	}
}

If the above doesn't solve your issue, can you provide the list of Prismic dependencies you're running with? Running those commands can help you get that info:

npm ls @nuxtjs/prismic
npm ls @prismicio/vue
npm ls @prismicio/client
npm ls @prismicio/types

On an unrelated note, I'm curious what's your use case for using usePrismicText (a Vue composable) in a JavaScript util function? Just in case, the asText helper from @prismicio/client can help achieve similar results. @prismicio/client also exposes an isFilled helper with methods to check if fields are filled, allowing for such potential refactor:

import { asText, isFilled, type TitleField, type RichTextField } from '@prismicio/client'

export default function (field: TitleField | RichTextField) {
	return isFilled.richText(field) ? asText(field) : null

	// This also works but is less explicit
	// return asText(field) || null
}
1 Like
6

OK, wow. Thank you.

  • I was up-to-date with all my packages, but I did not know that @prismicio/types was deprecated. Now all my type imports use @prismicio/client and I've gotten rid of @prismicio/types. It actually solved a couple of other minor issues along the way.
  • I didn't know about isFilled. That changes a lot. Your refactor is much nicer and using the helper functions from @prismicio/client makes much more sense.
1 Like
7

Awesome! Glad you got it all sorted :slight_smile: We'll investigate ways to advertise those changes more clearly!

Just a last FYI, all helpers are also available within Vue templates through $prismic, allowing such pattern:

<template>
  <article>
    <header v-if="$prismic.isFilled.richText(post.data.title)">
      ...
    </header>
  </article>
</template>
1 Like