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.