Watch a live product demo πŸ‘€ See how Sanity powers richer commerce experiences

Can you run GROQ inside a Document Preview?

6 replies
Last updated: May 12, 2022
Hi all, anyone ever run some groq inside a document preview? Inside a reference field I need to add a flag to illustrate whether the referenced document also references the current document πŸ™ƒ.

preview: {
    select: {
      title: 'title',
      subtitle: 'type',
      type: 'type',
    },
    prepare({ title = 'Untitled', type, subtitle }) {
      const sub = // groq - does this doc reference the parent doc?;
      return {
        title,
        subtitle: sub,
        media: eosIcon,
      };
    },
  },
May 11, 2022, 4:47 PM
Alternative is creating a custom component. Although achievable its a lot of work for such a small tweak to the default
array
of
references
setup... if I could somehow add the flag to the preview then I can save having to re-invent the wheel!
Any ideas/approaches/help more than welcome, thanks!
May 11, 2022, 4:49 PM
Hey Mark! Previews can't handle async functions, so you won't be able to fetch anything from there. Is the parent referenced on the document? If so, you can select a value from that document using this method.
May 11, 2022, 6:21 PM
user M
- thank you soooo much for the pointers there, as ever amazing support!
I am so close to having it work perfectly, but, there is potentially one fatal issue.

Working code and how it renders attached... all perfect.

preview: {
    select: {
      title: 'title',
      subtitle: 'type',
      type: 'type',
      ref: 'relEos.0.relEos',
      id: '_id',
    },
    prepare({ title = 'Untitled', type, subtitle, ref, id }) {

      const references = ref ? ref : {};
      let bidirectional = false
      let refIds;
      if(!isEmpty(references)) {
        refIds = Object.entries(references).map(([key, value]) => value?._ref);
        bidirectional = refIds.includes(id);
      }

      return {
        title,
        subtitle: bidirectional ? `${subtitle.toUpperCase()} - Bidirectional` : subtitle.toUpperCase(),
      };
    },
  }
The issue is I need this for every item in the reference array... obviously by using
ref: 'relEos.0.relEos'
in the select I'm limited to the first array item.
Doing
ref: 'relEos'
returns an array of all the references but I can't then access the data in those referenced documents without groq.
So hacky pirate me is thinking I can just add 30
ref: 'relEos.0.relEos'
to my
select
and then just conditionally process them.
Sensible good dev me is thinking it does indeed require a custom component. I've had a little poke through the source code for the
reference
field and am thinking I could piece together a custom reference component along the lines of this . I've not done much with `part:`'s before. Thoughts or ideas very much appreciated 😊.
May 12, 2022, 10:39 AM
Ah, yeah that is an issue. I think at this point you will need to create a custom preview component, since it'll allow you to create a React component that can handle promises.
May 12, 2022, 5:46 PM
You can make custom preview components?! I love Sanity! Thanks for the direction you utter champion 🀘
May 12, 2022, 6:34 PM
Haha, you're welcome! It's a really similar process to creating a custom input component. More on it here .
May 12, 2022, 6:36 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