Query and display categories from Sanity blog post schema

Looking at your code, the issue is that categories is an array in the blog schema, not a single object. When you try to access post.categories.title, JavaScript can't find a title property directly on the array.

There are two ways to fix this:

Option 1: Fix Your GROQ Query (Recommended)

Your current query has a syntax issue. The categories field should be dereferenced properly:

client.fetch(
  `*[_type == "post"] {
    title,
    slug,
    body,
    categories[]-> {
      title
    },
    mainImage {
      asset -> {
        _id,
        url
      },
      alt
    }
  }`
)

Notice the change: categories[]-> instead of categories { category -> {...} }. The []-> syntax dereferences all items in the array.

Then in your JSX, you can access the first category like this:

<span className="thumb-title">
  {post.categories && post.categories[0]?.title}
</span>

Or display all categories:

<span className="thumb-title">
  {post.categories?.map(cat => cat.title).join(', ')}
</span>

Option 2: Keep Your Query, Fix the JSX

If your current query structure is working (though it looks incorrect), you'd need to access it as an array:

<span className="thumb-title">
  {post.categories?.[0]?.category?.title}
</span>

Why This Happens

In Sanity's blog schema, categories is defined as an array of references:

{
  name: 'categories',
  type: 'array',
  of: [{type: 'reference', to: {type: 'category'}}]
}

This means a post can have multiple categories, so you always get an array back, even if there's only one category. You need to access array elements using bracket notation like categories[0] to get individual items.

The []-> operator in GROQ dereferences all items in an array of references, which is exactly what you need here to get the actual category documents with their titles.