Watch a live product demo 👀 See how Sanity powers richer commerce experiences

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 , 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!
May 25, 2021, 7:46 PM
are the items in question being sorted within an array field?
May 25, 2021, 8:13 PM
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)
May 25, 2021, 8:14 PM
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.
May 25, 2021, 8:17 PM
Oh sorry, do you mean sorted within an array field in Gatsby? They are mapped over to display, but not sorted
May 25, 2021, 8:18 PM
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:
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
May 25, 2021, 9:22 PM
Does that make sense?
May 25, 2021, 9:22 PM
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?
May 25, 2021, 9:30 PM
May 25, 2021, 9:33 PM
Awesome! Thanks man, I appreciate your help.
May 25, 2021, 9:34 PM
other more blunt options is adding an "order" field in your existing schema which the user can set. IE 1,2,3,4
May 25, 2021, 9:34 PM
and then sorting it on the front end
May 25, 2021, 9:34 PM
Yep, that's what order-documents does, I believe
May 25, 2021, 9:35 PM
i want to say that might only do it in the sanity studio front end, but didn't read into that much
May 25, 2021, 9:35 PM
It does, but then you can set the graphQL query to sort by 'order' and it works
May 25, 2021, 9:36 PM
ah nice
May 25, 2021, 9:36 PM
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
May 25, 2021, 9:37 PM

Sanity– build remarkable experiences at scale

The Sanity Composable Content Cloud is the modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Related answers

Get more help in the community Slack

TopicCategoriesFeaturedRepliesLast Updated
After adding the subtitle and running this code npm run graphql-deploy It does nothingSep 15, 2020
how to limit a reference to just one entry in Studio reference input side versus the default as-many-entries-as-you-fill-in-an-array...Sep 18, 2020
Is it possible to fetch more than one "_type" using GROQ?Nov 2, 2020
I want to add a view with the Structure builder (S.view.component) where I list similar documents based on the title. What...Sep 23, 2020
Is there a structure builder example where the format of each preview for the document list is modified?Feb 3, 2021
I have an array of references to a country schema type but it always just returns NULL values for meJan 30, 2021
Hi, I need help with a query for getting the url of an image asset. Here is what I've been trying, but I only get the _ref...Dec 1, 2020
Sanity UI looks brilliant :smiley: Is something like the current date picker possible at the moment? I’m not sure if anicon...Dec 21, 2020
Hey everyone. I have been coding and may have potentially accidentally deleted something. Does anyone know how to resolve...Dec 26, 2020
Hello everyone and happy new year :raised_hands::skin-tone-2:, I have a problem with outputting Portable Text :disappointed:...Jan 1, 2021

Related contributions

Clean Next.js + Sanity app
- Template

Official(made by Sanity team)

A clean example of Next.js with embedded Sanity ready for recomposition.

Cody Olsen
Go to Clean Next.js + Sanity app

Blog with Built-in Content Editing
- Template

Official(made by Sanity team)

A Sanity-powered blog with built-in content editing and instant previews.

Go to Blog with Built-in Content Editing