Get help on Discord

How to get the title field from a reference field in Sanity.io

67 replies
Last updated: Jul 1, 2021
Hello everyone, there’s a way to get the “title field” from a reference field?
{
      name: 'Forms',
      type: 'object',
      preview: {
        prepare: () => ({
          title: 'Form Builder',
        }),
      },
      fields: [
        {
          title: 'Forms',
          name: 'formBuilder',
          type: 'reference',
          to: [{ type: 'form' }],
        },
      ],
    }
The form has a title, but I didn’t figured out how to get the title of a referenced field in preview.
Thanks.
AI Update

Yes! You can access the title from your referenced form document using the select property in your preview configuration. Here's how to update your code:

{
  name: 'Forms',
  type: 'object',
  preview: {
    select: {
      formTitle: 'formBuilder.title',  // Access the title field from the referenced form
    },
    prepare: ({formTitle}) => ({
      title: formTitle || 'Form Builder',  // Use the form's title, with fallback
      subtitle: 'Form'  // Optional: add a subtitle for context
    }),
  },
  fields: [
    {
      title: 'Forms',
      name: 'formBuilder',
      type: 'reference',
      to: [{ type: 'form' }],
    },
  ],
}

The key is using dot notation in the select object: formBuilder.title tells Sanity to follow the reference and grab the title field from the referenced form document. Then in the prepare function, you can use that value to display it as the preview title.

You can access any field from the referenced document this way, not just the title. For example, if your form had other fields like description or formType, you could access them with formBuilder.description or formBuilder.formType.

This is explained in the preview configuration documentation, which shows how to access fields from referenced documents using dot notation in the select object.

Preview using fields from referenced documents
I’ve tried but I didn’t get the approach
You need to use 
select
to pick which fields that will become available in the 
prepare
function
yes I did in this way
preview: {

select: {

title: 'title',

},

prepare: ({ _title_ }) => ({

title: 'Form Builder',

}),

},
but the title contains an object with key as reference and not the field itself
Sorry, 
title
is a reference?
is form
this is a plceholder
but I’ve done in the right way
The 
select
need to include your reference:

  preview: {
    select: {
      title: 'title.something'
    },
If 
title
is a reference, this will follow the reference and look up the field 
something
.
preview: {

select: {

form: 'form',

},

prepare: ({ _form_ }) => {

console.log(_form_);

return {

title: 'Form Builder',

};

},

},
You need a dot to follow the reference.
form.title?
is undefined
In your schema, the field is called 
formBuilder
. So presumably 
formBuilder.title
.
If you paste your whole schema, I can help a little better. Your naming is a bit confusing to me.
is undefined
You need to use 
select
to pick which fields that will become available in the 
prepare
function
yes I did in this way
preview: {

select: {

title: 'title',

},

prepare: ({ _title_ }) => ({

title: 'Form Builder',

}),

},
but the title contains an object with key as reference and not the field itself
Sorry, 
title
is a reference?
is form
this is a plceholder
but I’ve done in the right way
ok now works 🙂 thanks you!’cause you are here I can ask you how to fetch the reference from groq? I mean I have this query


*[_type == "page" && slug.current == 'test'] [0] {

"form": builder[29]

}

where the result is
The 
select
need to include your reference:

  preview: {
    select: {
      title: 'title.something'
    },
If 
title
is a reference, this will follow the reference and look up the field 
something
.
preview: {

select: {

form: 'form',

},

prepare: ({ _form_ }) => {

console.log(_form_);

return {

title: 'Form Builder',

};

},

},
You need a dot to follow the reference.
I can’t find a way in the docs to retrive this field directly from groq query
form.title?
i’ve tried to add ->
to follow the reference but the result was empty
ok I’ve got 🙂
You figured it out?
formBuilder->
yes, I think the hard part is to get in the array
cause builder is an array
formBuilder[]->
and there’s different components in,
no I mean the builder of page
*[_type == "page" && slug.current == 'test'] [0] {
  builder
}
builder is an array of a lots of different compoents
where inside it could be a form that use a reference
I don’t have your whole schema, but something like:
*[_type == "page" && slug.current == 'test'] [0] {
  "builder": builder[]->
}
Depeds on what the 
builder
field is
as you can see countdown has not reference
form has reference
What is the root field called?
You can do 
theFieldName[_type == "reference"]->
where can I do this?
inside builder?
as you can see here the entire builder array, and the last element in this case is the form with reference
Yes.

*[_type == "page" && slug.current == 'test'] [0] {
  "form": builder[_type == "reference"]
}
ok but this exlude the result from the array
it should be part of the array
my solution is to handle this in front-end
don’t know how to do this in groq, we have to do a kind of map of each field and if there’s a reference I have to replace with the referenced
uhm
You want to have the whole array, but expand references? Try this:
*[_type == "page" && slug.current == 'test'] [0] {
  "form": builder[] | {
    ...,
    "formBuilder": formBuilder->
  }
}
let me try
wow
the power of groq is unbelievable
thanks for your time buddy
you saved my day
My pleasure!

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.

Get started for freeExplore the demo

Was this answer helpful?