How to dereference objects inside Sanity array fields (pageBuilder)?

5 replies
Last updated: Nov 2, 2021
What am I doing wrong here?
{
      name: "pageBuilder",
      type: "array",
      title: "Page content",
      of: [
        { type: "content" },
        {
          type: "reference",
          name: "ctaSection",
          title: "CTA",
          to: [{ type: "ctaBlocks" }],
        },
      ],
    },

*[_type == 'insurance' && slug.current == $slug][0]{
    ...,
    ctaSection->{
      picture,
      title,
      cta{
        label,
        reference->{
          _type,
          "slug": "/" + slug.current,
        }
      }
    }
  }
This is all im getting

{
      _key: '6569f1186d08',
      _ref: 'c92ccb9a-5441-4fca-8dea-8fb7cbbb7cfd',
      _type: 'ctaSection'
    }
AI Update

The issue you're encountering is that when you have an array with multiple types (like content and a reference), GROQ doesn't automatically know which items in the array to dereference. You're trying to dereference ctaSection at the root level, but ctaSection is actually inside your pageBuilder array, not a field on the document itself.

Here's what you need to do - dereference the items within the array:

*[_type == 'insurance' && slug.current == $slug][0]{
    ...,
    pageBuilder[]{
      ...,
      _type == "ctaSection" => @->{
        picture,
        title,
        cta{
          label,
          reference->{
            _type,
            "slug": "/" + slug.current,
          }
        }
      }
    }
  }

The key changes:

  1. pageBuilder[] - Project over the array items
  2. _type == "ctaSection" => @->{...} - Conditionally dereference only when the item type is ctaSection. The @ represents the current item in the array being processed
  3. ... - Spread operator to preserve the original fields for non-matching items

This preserves other array items (like your content type) while dereferencing only the ctaSection references.

Alternatively, if you want to dereference all references in the array regardless of their name, you can check for the reference type:

pageBuilder[]{
  ...,
  _type == "reference" => @->{
    picture,
    title,
    cta{
      label,
      reference->{
        _type,
        "slug": "/" + slug.current,
      }
    }
  }
}

The reason you're only seeing {_key, _ref, _type} is because your original query ctaSection-> is looking for a field literally named ctaSection on the insurance document itself, but that field doesn't exist at the root level - it's a named reference type inside your array.

Show original thread
5 replies
Looks like you also need to specify the array (
pageBuilder
) in your projection. Currently, you’re getting that
ctaSection
reference because it’s being returned by the
.
Good one, this is what I changed it to:
*[_type == 'insurance' && slug.current == $slug][0]{
    ...,
    pageBuilder[]->{
      ...,
      ctaSection{
        picture
      }
    }
  }
But I'm getting

pageBuilder: [
    null,
    {
      _createdAt: '2021-10-09T16:18:59Z',
      _id: 'c92ccb9a-5441-4fca-8dea-8fb7cbbb7cfd',
      _rev: 'Rfna04Xn7gw6L6Geea4aP5',
      _type: 'ctaBlocks',
      _updatedAt: '2021-10-09T19:06:10Z',
      cta: [Object],
      ctaSection: null,
      picture: [Object],
      title: 'title of insurance'
    }
  ],
For an array mixed with references and non-references, I’d recommend an approach like this:

*[_type == 'insurance' && slug.current == $slug][0]{
  ...,
  pageBuilder[]{
    _type == 'content' => @,
    _type == 'ctaSection' => @->
  }
}
Once you get the dereference working, you can build out your ctaSection projection to how you want it.
For an array mixed with references and non-references, I’d recommend an approach like this:

*[_type == 'insurance' && slug.current == $slug][0]{
  ...,
  pageBuilder[]{
    _type == 'content' => @,
    _type == 'ctaSection' => @->
  }
}
Once you get the dereference working, you can build out your ctaSection projection to how you want it.
Yes that works! Thank you

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Was this answer helpful?