How to fetch all references in GROQ block content query?

Getting all references from block content can definitely be tricky! The key issue is that references in annotations are stored in a nested structure - they're inside the markDefs array, which itself is inside each block in your content array.

Here's the GROQ syntax you need to dereference those references:

content[]{
  ...,
  markDefs[]{
    ...,
    _type == "internalLink" => {
      "href": "/" + @.reference->slug.current
    }
  }
}

The special syntax here is the @.reference-> part. Since you're dealing with references inside an array (markDefs) that's inside another array (blocks), you need to use the @ operator to properly dereference them.

For a complete example, here's a more robust query pattern:

*[_type == "yourDocType"] {
  _id,
  title,
  content[]{
    ...,
    markDefs[]{
      ...,
      _type == "internalLink" => {
        "slug": @.reference->slug.current,
        "title": @.reference->title
      }
    }
  }
}

This will expand your reference annotations and include the data you need from the referenced documents. You can add any other fields from the referenced document you need inside that projection.

For image blocks with references, you'd handle them similarly:

content[]{
  ...,
  _type == "image" => {
    ...,
    asset->
  }
}

There's an excellent detailed guide that walks through this entire process, including how to set up the schema, query the data, and render it in React. It specifically covers the nested array dereferencing challenge you're facing!

The key takeaway: use @.reference-> when dereferencing inside nested arrays in GROQ. Hope this helps! 🎉