👋 Next.js Conf 2024: Come build, party, run, and connect with us! See all events

Using preview values of referenced documents in parent preview

8 replies
Last updated: Oct 18, 2022
Children preview value in the parent preview
Hi everyone!

I was wondering, can I somehow use the
preview value of the referenced document in the preview of the parent?
I have an array of objects, object has two fields - a reference to the other document and a boolean. I would like to use the default values from the reference preview for the parent (object) preview. I know that I can get some useful data in the
select
section but it seems I can only get data from the fields. Why I would like to use it? Previously, when I had an array of references Sanity was by default showing the icon connected with the referenced type. Now when I have the list of objects (with ref inside) I have the default icon everywhere.
Any help would be appreciated
🙂

Sanity version:
"@sanity/base": "^2.33.3",
Oct 17, 2022, 3:34 PM
Here is my current data structure:
Oct 17, 2022, 3:37 PM
Witam 🥕 !Yes it is possible and you need to project the
ref
into your
select
.example:

export default {
  name: 'movie',
  type: 'document',
  fields: [...],
  preview: {
    select: {
      title: 'title',
      director: 'director.name' // if the movie has a director, follow the relation and get the name
    },
    prepare(selection) {
      const {title, director} = selection
      return {
        title: title,
        subtitle: `Directed by: ${director ? director : 'unknown'}`
      }
    }
  }
}

👉 https://www.sanity.io/docs/previews-list-views#dcbbdb0ec3aa
Oct 17, 2022, 8:10 PM
Cześć
user J
,
Oct 18, 2022, 6:22 AM
Cześć
user J
!
from your example,
name
is one of the fields in the
director
document, right? What I want to achieve is to get the preview values from this ref. By the preview values, I mean for example an image if there is one, and if not an icon of this document. Screenshot below shows which icon I want to get 🙂:
Oct 18, 2022, 6:27 AM
And I want to get this icon to have:
Oct 18, 2022, 6:29 AM
Ah okay I did not see what you meant before!1. Small Tip:
icon: VideoIcon
is enough 🙂 no need to use an img component, we got’ya! 2. There are 2 approaches to get the icons but I would need your actual schemas (barebones but seeing what fields are there), if you want more help, than that:
Prepare and then
turnicate the 2 or more icon options or define them like that :
{
  name: 'ticket',
  type: 'document',
  fields: [...],
  preview: {
    select: {
      title: 'title',
      summary: 'summary',
      status: 'status',
    },
    prepare({ title, summary, status }) {
      const EMOJIS = {
        open: '🎫',
        resolved: '✅',
        cancelled: '🚫'
      }
      return {
        title: title,
        subtitle: summary,
        media: <span style={{fontSize: '1.5rem'}}>{status ? EMOJIS[status] : '🎫'}</span>
      }
    }
  }
}
Or write your own
preview component which then can be 💅 a lot through JSX or Sanity UI.
Oct 18, 2022, 9:06 AM
Thanks for your help 🙂, it seems that we need to implement the logic on our own. I hoped that we will be able to reuse the logic from the default Sanity preview (which matches the document with the most accurate media (either image if there is an image in the document, or icon). If we can't reuse it, we will try to do it differently.
Oct 18, 2022, 10:23 AM
Wonderful 🙂 You can also try to set media and icons for all doc and refs upstream from the video doc, which then could work
Oct 18, 2022, 10:30 AM

Sanity– build remarkable experiences at scale

Sanity is a 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.

Was this answer helpful?