Get help on Discord

How to retrieve array items in their Studio display order using GROQ?

1 replies
Last updated: Jan 5, 2023
Hi all,Does anyone know how to retrieve items from an array in the order they are displayed in the studio?

I'm working on a website with an image gallery. The images are being pulled from an array of references, and it's important to be able to set the order in the studio (given the helpful drag and drop functionality of the array) and have the images on the front-end reflect that order.

When I GROQ the references and get the image urls they appear to be in a random order. I looked at the ordering documentation in the Query Cheat Sheet but they only seem to have solutions for ordering based on specific attributes, which I don't believe is helpful in my case, unless there is an attribute I'm unaware of that corresponds to the order in studio?

Thank you!
AI Update

Good news! GROQ preserves array order by default when you dereference references using []->. The order you see in the Studio should be maintained in your query results.

Based on this exact question from the Sanity community, the solution is straightforward:

*[_type == "gallery"]{
  images[]->
}

This simple syntax grabs the referenced images from your gallery document and automatically preserves the order you've set in the Studio.

Common mistake that breaks ordering:

If you're querying using back-references (using references() to find documents that point to your array items), the order won't be preserved because you're essentially doing a reverse lookup:

// ❌ This won't preserve your Studio order
"images": *[_type == "image" && references(^._id)]{
  url
}

Instead, use the direct array dereference:

// ✅ This preserves order
images[]->{
  "imageUrl": asset->url,
  altText,
  caption
}

If you need to preserve _key along with the dereferenced content:

Sometimes you need both the original array metadata (like _key) and the dereferenced document. Use this pattern:

images[]{
  _key,
  ...(@->)
}

This explicitly includes the _key property before spreading the dereferenced content, which can be useful for React keys or tracking individual items.

Troubleshooting checklist:

  1. Check your query structure - Make sure you're using []-> not a reverse lookup with references()
  2. Test in Vision - Use the Vision plugin in your Studio to verify the order is correct at the query level
  3. Check your frontend - Sometimes JavaScript array methods or framework rendering logic can inadvertently reorder results
  4. Clear caches - You might be seeing old data if there's aggressive caching

The bottom line: Simple dereferencing with images[]-> should "just work" and maintain your Studio order automatically!

Show original thread
1 reply
Ah nvm, I realized I was using a much more convoluted way of querying than I needed to, which meant the order in the desk wasn't being taken into account.
I was doing this:

"works": *[_type == "work" && public && references(^._id)]{
   		title,
   		defined(workImage.name) => {"caption": workImage.name},
   		defined(workImage.altText) => {"altText": workImage.altText}, 
   		"imageUrl": workImage.attachment.asset->url
   }
Which was grabbing the works based on their back reference to each artist, when really all I needed to do was:

works[]->{
      title,
   		defined(workImage.name) => {"caption": workImage.name},
   		defined(workImage.altText) => {"altText": workImage.altText}, 
   		"imageUrl": workImage.attachment.asset->url
   }
This grabs the referenced works from the artist document, which by default seems to be preserving the order.

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.

Get started for freeExplore the demo

Was this answer helpful?