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

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!