How to dereference a field in GROQ while keeping original structure?

You can use the dereferencing operator (->) in GROQ to get the title of a referenced document while keeping all your other data. For your case with images that have tags referencing collections, you'll want to dereference the references within the array.

Here's how to structure your query:

*[_type == 'image']{
  ...,
  tags[]->{
    title
  }
}

Let me break down what's happening:

1. ... - The ellipsis operator keeps all existing fields from your image documents
2. tags[] - The square brackets traverse the array of tags
3. -> - The dereferencing operator follows each reference to get the actual collection document
4. {title} - This projection extracts just the title from each collection

This will give you something like:

[
  {
    _id: "image-1",
    url: "...",
    // all your other image fields
    tags: [
      { title: "Collection A" },
      { title: "Collection B" }
    ]
  }
]

If you want just the collection titles as a flat array of strings instead of objects, you can use a naked projection:

*[_type == 'image']{
  ...,
  tags[]->title
}

This would give you:

{
  tags: ["Collection A", "Collection B"]
}

The key points:

• Use [] to traverse arrays of references
• Use -> to dereference (follow) the reference
• Use {title} to project just the fields you want, or .title for a naked projection to get just the values

You can read more about this in the GROQ documentation on expanding references.