Gatsby Site - How to Make Sanity Sort Orders reflected in the Site?
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:
Studio sort orders (defined in your schema's
orderingsproperty) only affect how documents appear within the Studio UI itself. These are purely for editor convenience and don't create any queryable field.Manual drag-and-drop ordering (via the
@sanity/orderable-document-listplugin) creates an actualorderRankfield 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
orderRankfield 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 descin 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.
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.