Gatsby Site - How to Make Sanity Sort Orders reflected in the Site?

16 replies
Last updated: May 25, 2021
I'm building a Gatsby site, and I'm trying to make it so that the order of items in Sanity becomes the order of items on the live site, so that a non-technical user can change the order. I can sort, and I've built custom sorts using https://www.sanity.io/docs/sort-orders , but I haven't found how to make those sorts reflected in the site. I've found sanity-plugin-order-documents, and that works great for small data sets, and I'm just wondering if there's some kind of query field I can sort by to make the Gatsby site always reflect the current Sanity sort, whether it's by hand through order-documents, a custom sort, or something standard like date. Thanks y'all!
AI Update

I understand you're trying to connect manual ordering in Sanity Studio to your Gatsby site's display order. Let me clarify how this works, because there are actually two separate concepts at play here.

The key distinction:

  1. Studio sort orders (defined in your schema's orderings property) only affect how documents appear within the Studio UI itself. These are purely for editor convenience and don't create any queryable field.

  2. Manual drag-and-drop ordering (via the @sanity/orderable-document-list plugin) creates an actual orderRank field on your documents that you can query in Gatsby.

To make ordering work in your Gatsby site:

The @sanity/orderable-document-list plugin adds an orderRank field to your documents when you drag and drop them in Studio. This is the field you need to sort by in your GROQ queries.

First, make sure you've added the orderRank field to your schema:

import {orderRankField} from '@sanity/orderable-document-list'

{
  name: 'yourDocumentType',
  type: 'document',
  fields: [
    orderRankField({ type: 'yourDocumentType' }),
    // ... other fields
  ]
}

Then in your Gatsby queries, sort by the orderRank field:

*[_type == "yourDocumentType"] | order(orderRank)

The orderRank field will only exist on documents that have been manually ordered using the plugin. For documents without it, you can provide a fallback:

*[_type == "yourDocumentType"] | order(orderRank asc, _createdAt desc)

This way, manually ordered documents appear first (in your chosen order), and any unordered documents follow, sorted by creation date.

Important notes:

  • The orderRank field is created and maintained by the plugin when editors drag-and-drop documents in the orderable list view
  • Standard Studio sort orders (like sorting by date in a dropdown) don't create queryable fields - they're just UI conveniences
  • If you're using custom Studio sort orders and want those reflected on your site, you'll need to manually replicate that same GROQ sorting logic in your Gatsby queries (e.g., if you sort by publishedDate desc in Studio, use that same sort in your query)
  • For very large datasets, you might hit performance limits with the drag-and-drop approach. In those cases, consider using a separate "ordering" document that contains an array of references to your documents, giving you more explicit control over ordering

The plugin's GitHub README has complete setup instructions, including how to configure the desk structure to enable the drag-and-drop interface.

are the items in question being sorted within an array field?
if so, i found that they are returned in the same order you see them on the screen from top to bottom (at least so far)
They're not, they're the top-level items. So far there's just one schema, and I'm trying to sort the items in the schema.
Oh sorry, do you mean sorted within an array field in Gatsby? They are mapped over to display, but not sorted
No worries! My question wasn't clear : )
Trying to figure out if the items you're trying to sort are part of an array schema within Sanity like this:
https://www.sanity.io/docs/array-type
Let's say you're displaying a bunch of cast members on a page with information on a particular film to stay consistent with the docs.

Do do that, you would create a "Cast Members" schema which is made up of a single field - an array of actors.

That creates the UI pictured in said docs where you can drag cast members into a particular order.

When you do that, I've found that the sanity API returns those cast members in the same order that you see within the Studio UI
Does that make sense?
It does, thanks for the clarification. So say I'm trying to do this with my top-level schema, maybe "Movie" in your example. Do I make a wrapper-schema that just contains a single field: an array of Movies?
yep!
Awesome! Thanks man, I appreciate your help.
other more blunt options is adding an "order" field in your existing schema which the user can set. IE 1,2,3,4
and then sorting it on the front end
Yep, that's what order-documents does, I believe
i want to say that might only do it in the sanity studio front end, but didn't read into that much
It does, but then you can set the graphQL query to sort by 'order' and it works
ah nice
Yep! Caveat: I found that the snippet they give on their page didn't work, I had to build mine out in GraphiQL and then it ran fine

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?