Help with fetchLinks

Developing with Prismic
1

Hello,

Working through trying to create a blog. In setting up categories for each blog post, I am trying to display the categories for an individual blog post on each blog post page. I followed these steps here Create Taxonomies with Next.js - Documentation - Prismic however its not working for me. Im using Next.js 14 and typescript. Im new to typescript so I'm sure its something I need to do relating to that.

Screenshot 2024-02-08 at 2.52.43 PM
Screenshot 2024-02-08 at 2.52.43 PM2290×2186 673 KB

Screenshot 2024-02-08 at 2.52.16 PM
Screenshot 2024-02-08 at 2.52.16 PM2378×2274 617 KB

repo https://kataliya-website.prismic.io/

2

Not sure if this will help but here is one of my blog "solutions" that uses fetchLinks:
If you're willing/able, DM me with your GitHub repo and I'll clone it so I can replicate and propose a solution.

I see you have a console.log, what do you get as the output of:

console.log(page.data.categories)

/src/app/[...uid]/page.tsx
const page = await client
    .getByUID('page', uid, {
      fetchLinks: [
        'subdirectory',
        'boardmember.uid',
        'boardmember.name',
        'boardmember.role',
        'boardmember.image',
        'news.title',
        'news.date_published',
        'news.featured_image',
        'news.excerpt',
        'news.news_url',
      ],
    })
    .catch(() => notFound())
  let posts
  if (page.uid === 'blog') {
    posts = await client.getByTag('blog', {
      filters: [prismic.filter.at('document.type', 'page')],
      pageSize: sitemetadata.data.blogpostsperpage || 5,
      page: 1,
      orderings: {
        field: 'my.page.datepublished',
        direction: 'desc',
      },
    })
  }
3

The console log returns the categories array. Just not sure how to access it. The only thing it will let me access without errors is link_type.

I don't have the repo up yet. I will try to upload it tonight.

[
{
category: {
id: 'ZcQO7xAAAGg3gOp8',
type: 'category',
tags: ,
lang: 'en-us',
slug: '-',
first_publication_date: '2024-02-07T23:15:04+0000',
last_publication_date: '2024-02-07T23:15:04+0000',
uid: 'real-estate',
url: '/blog/categories/real-estate',
data: [Object],
link_type: 'Document',
isBroken: false
}
},
{
category: {
id: 'ZcQOyRAAAEw3gOo_',
type: 'category',
tags: ,
lang: 'en-us',
slug: '-',
first_publication_date: '2024-02-07T23:14:19+0000',
last_publication_date: '2024-02-07T23:14:19+0000',
uid: 'business',
url: '/blog/categories/business',
data: [Object],
link_type: 'Document',
isBroken: false
}
}
]

4

So i can get it to work locally with this

{page.data.categories.map((cat) => (
                    <li key={cat.category.id}>
                      <PrismicNextLink document={cat.category}>
                        <Badge>{cat.category.data.name}</Badge>
                      </PrismicNextLink>
                    </li>
                  ))}

However there is a type error

Type 'ContentRelationshipField<"category">' is not assignable to type 'PrismicDocument<Record<string, any>, string, string> | null | undefined'.
Type 'EmptyLinkField<"Document">' is missing the following properties from type 'PrismicDocument<Record<string, any>, string, string>': data, id, uid, url, and 9 more.ts(2322)

I guess thats what I actually need help with.

5 
import {CategoriesDocument} from '../../prismic-types'
// This assumes that categories is an array
// Also that your custom type is called Categories
const {categories} = page.data as CategoriesDocument[]

GIve that a whirl and let me know how it goes. A repo would make it much easier for me to help. :wink:

1 Like
6

Ah I see, still tying to figure out typescript. I was able to get it to work. Not sure if its the correct way, but it does work.

Thank you so much for the help!

1 Like