Get image metadata from image component inside block type with GraphQL

Yes, when working with images inside Portable Text (block content) in GraphQL, you can access image metadata, though it requires understanding how Sanity structures this data in the GraphQL API.

The Raw Field Approach

For Portable Text fields in GraphQL, Sanity automatically generates a <fieldName>Raw field that returns the raw JSON structure of your block content, including image references. This is documented in the GraphQL documentation under the Portable Text section.

Here's how to query it:

{
  allPost {
    title
    bodyRaw  # Note the "Raw" suffix
  }
}

This returns the Portable Text as raw JSON, which will include image objects with their asset references:

{
  "allPost": [{
    "title": "My Post",
    "bodyRaw": [
      {
        "_type": "block",
        "children": [...]
      },
      {
        "_type": "image",
        "asset": {
          "_ref": "image-abc123...",
          "_type": "reference"
        }
      }
    ]
  }]
}

Accessing Image Metadata

The challenge is that by default, the Raw field only gives you the reference to the image asset, not the actual metadata. The GraphQL API doesn't automatically resolve these references within the raw JSON like GROQ does with the -> operator.

However, if you're using source plugins like gatsby-source-sanity or gridsome-source-sanity, these plugins provide additional arguments on the Raw field that can resolve image asset references for you, giving you access to dimensions, URLs, and other metadata.

Alternative Approach: Separate Asset Queries

If you need full image metadata (dimensions, file size, EXIF data, etc.) and aren't using a source plugin, you may need to:

1. Query the bodyRaw field to get image asset IDs
2. Make a separate query to fetch those specific assets with their metadata
3. Merge the data client-side

Or consider using GROQ instead, which handles reference expansion more elegantly with its asset-> syntax and gives you more flexible querying for nested content structures.

The GraphQL API is fully supported and works well for many use cases, but GROQ tends to be more flexible when dealing with deeply nested content like images within Portable Text blocks.