Difficulty accessing properties through the content relationship

Developing with Prismic
,
1

Hi, I am following a document on organizing my content from here (Create Taxonomies with Next.js - Documentation - Prismic). I planned to organize my posts based on their category and loop them in a component. The issue I am facing is when filtering my the category, which is a content relationship field, I can't access other properties aside from the link_type.

Here's my blog_post page type structure where I added a group field named categories.

{
  "id": "blog_post",
  "json": {
     "Main": {
        "categories": {
        "type": "Group",
        "config": {
          "label": "Categories",
          "fields": {
            "category": {
              "type": "Link",
              "config": {
                "label": "Category",
                "select": "document",
                "customtypes": ["category"]
              }
            }
          }
        }
      },
     }
  }
}

Categories component

'use client'

import { createClient } from '@/prismicio'
import CategorySection from './CategorySection'
import { getAllBlogPosts } from '@/lib/utils'

export default async function Categories() {
  const client = createClient()
  const categories = await client.getAllByType('category')
  const posts = await getAllBlogPosts()

  return (
    <>
      {categories.map((item, index) => (
        <CategorySection key={index} name={item.data.name} items={posts} />
      ))}
    </>
  )
}

CategoriesSection component

interface CategorySectionProps {
  name: string | null
  items: Content.BlogPostDocument[]
}

const CategorySection: React.FC<CategorySectionProps> = ({ name, items }) => {
  const categorizedPosts =
    (name &&
      items?.filter((item) => {
        return (
          item.data.categories &&
          item.data.categories.length > 0 && 
          item.data.categories.some(({ category }) => {
            console.log('category', category.uid) // here I can only access link_type
            // Access category name through the content relationship
            const categoryName = category.link_type || null
            return categoryName === name
          })
        )
      })) ||
    []

I can't access uid and it throws an error saying

Property 'uid' does not exist on type 'ContentRelationshipField<"category">'.
Property 'uid' does not exist on type 'EmptyLinkField<"Document">'.

utlis

export const getAllBlogPosts = async () => {
  const client = createClient()
  const blogPosts = await client.getAllByType('blog_post')
  return blogPosts
}

Additionally, after the posts is categorized within each section, I want to display the only the title, image and description.

2

@magallen.fc

I could be wrong, but it appears as though you're using 'use client' on an async (server) component. I believe this won't work. If you use client, you can't fetch data asynchronously through it.

3

Hi, I tried but it's still doesn't display the items on each categories.

6

Hoping to bump this because I'm having the same Issue with 'id' property.
Type error: Property 'id' does not exist on type 'ContentRelationshipField<"document">'.

Property 'id' does not exist on type 'EmptyLinkField<"document">'. I see it being returned in the raw JSON structure. How can we fix this correctly?

7

Following up again for my future self or anyone else who comes across this looking for the same answer. I ended up being able to access the id property like this:

const faqs = await Promise.all(
    slice.primary.faqs.map(async (faq) => {
      if (prismic.isFilled.contentRelationship(faq.faq)) {
        return await client.getByID<Content.FaqDocument>(faq.faq.id);
      }
    })
  )

The above may not be the cleanest way since it's getting them one by one instead of passing the array to getByIDs all at once. I did try filtering the list of IDs first for filled values but did not have any luck, but it's possible my syntax was just off in some way. If Prismic Support has a better efficiency for doing this and keeping TypeScript from yelling at me, I would love to know.