Query array in same order as Sanity Studio, not alphabetical

8 replies
Last updated: Sep 16, 2022
Hello everyone I need help querying an array in the order it appears in the sanity Studio :
Inside my Page document, I have a pageBuilder array which contains sections.
Inside Sanity studio, I can order these section inside my pageBuilder.
However, when I query the pageBuilder using GROQ, I get an object with the section in alphabetical order.

How can I get the same order as it is displayed in the Sanity studio?

thanks
AI Update

Good news - GROQ actually preserves the array order from your document by default! If you're seeing items in alphabetical order, it's likely due to how you're projecting the data, not the array itself.

When you query an array field like pageBuilder, GROQ maintains the exact order that exists in your document. Here's what you need to check:

The correct way to preserve order:

*[_type == "page"]{
  pageBuilder
}

Or if you need to expand references within the array:

*[_type == "page"]{
  pageBuilder[]{
    _type,
    _key,
    // other fields from your sections
  }
}

Common mistake that causes alphabetical ordering:

If you're using object projection with property names, those properties will appear alphabetically in the result. For example:

*[_type == "page"]{
  "hero": pageBuilder[_type == "hero"][0],
  "features": pageBuilder[_type == "features"][0],
  "cta": pageBuilder[_type == "cta"][0]
}

This creates an object with keys in alphabetical order, not preserving your original array order.

To maintain order, keep the array as an array - don't destructure it into separate properties. The order() function is for sorting results by specific fields, but you shouldn't need it here since arrays are already ordered.

If you're still seeing unexpected ordering, double-check that you're actually querying the array field directly and not creating a new object structure in your projection. The order you see in Studio should match what GROQ returns when querying the array field directly.

Show original thread
8 replies
If I am not mistaken, your original query doesn't require itself to respect the "natural" order of the array. It is written alphabetically by your projections' key names and returned that way.
If you asked for the page builder array outright, directly, the returns should be in the order they appear in the studio.

That said, you obviously still want to treat each section differently; is it possible you could ask for all sections, and use
conditional selections to stipulate how they're handled internally if and when they come up?
Then, if need be for "corrections" after the fact, you could re-sort the indices on the front end.
Hey thanks for your help, this is what I came up with following your advice :
I think that works 🙂
Awesome, glad to hear it! You might get away with also using what they all share just the once, and only the truly different ones inside the conditions.
Like they all seem to have a _type and heading, you could just write that twice, then do the conditions and leave those two out of the conditions.

It looks like the hero returned way lower, though; when I just did an ordered array myself it preserves the order on my front end so I am not sure what's going on there. How does this new query open? Is it something along the lines of


*[type=="page" && title=""homepage"][0] {
pageBuilder[] { 
// Other inside things
}
}
?
alright thanks for the tip !
not sure to understand your question about the hero though
the hero query is a bit different because it is not a reference:
Oh yeah, I was just mistaken thinking it was first on your list and trying to figure out why it didn't lead the return. You're good! I tend to overthink sometimes (all the time).
all good, thanks for your help !

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?