Skip to content
Unlock seamless workflows and faster delivery with our latest releases - Join the deep dive
Get help on Slack

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.
Jul 1, 2021, 9:43 AM
Jul 1, 2021, 9:48 AM
Preview using fields from referenced documents
Jul 1, 2021, 9:48 AM
I’ve tried but I didn’t get the approach
Jul 1, 2021, 9:49 AM
You need to use 
select
to pick which fields that will become available in the 
prepare
function
Jul 1, 2021, 9:52 AM
yes I did in this way
preview: {

select: {

title: 'title',

},

prepare: ({ _title_ }) => ({

title: 'Form Builder',

}),

},
Jul 1, 2021, 9:53 AM
but the title contains an object with key as reference and not the field itself
Jul 1, 2021, 9:53 AM
Sorry, 
title
is a reference?
Jul 1, 2021, 9:54 AM
is form
Jul 1, 2021, 9:54 AM
this is a plceholder
Jul 1, 2021, 9:54 AM
but I’ve done in the right way
Jul 1, 2021, 9:54 AM
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
.
Jul 1, 2021, 9:54 AM
preview: {

select: {

form: 'form',

},

prepare: ({ _form_ }) => {

console.log(_form_);

return {

title: 'Form Builder',

};

},

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

select: {

title: 'title',

},

prepare: ({ _title_ }) => ({

title: 'Form Builder',

}),

},
Jul 1, 2021, 9:53 AM
but the title contains an object with key as reference and not the field itself
Jul 1, 2021, 9:53 AM
Sorry, 
title
is a reference?
Jul 1, 2021, 9:54 AM
is form
Jul 1, 2021, 9:54 AM
this is a plceholder
Jul 1, 2021, 9:54 AM
but I’ve done in the right way
Jul 1, 2021, 9:54 AM
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
Jul 1, 2021, 10:01 AM
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
.
Jul 1, 2021, 9:54 AM
preview: {

select: {

form: 'form',

},

prepare: ({ _form_ }) => {

console.log(_form_);

return {

title: 'Form Builder',

};

},

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

*[_type == "page" && slug.current == 'test'] [0] {
  "form": builder[_type == "reference"]
}
Jul 1, 2021, 10:26 AM
ok but this exlude the result from the array
Jul 1, 2021, 10:26 AM
it should be part of the array
Jul 1, 2021, 10:26 AM
my solution is to handle this in front-end
Jul 1, 2021, 10:32 AM
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
Jul 1, 2021, 10:33 AM
uhm
Jul 1, 2021, 10:33 AM
You want to have the whole array, but expand references? Try this:
*[_type == "page" && slug.current == 'test'] [0] {
  "form": builder[] | {
    ...,
    "formBuilder": formBuilder->
  }
}
Jul 1, 2021, 10:34 AM
let me try
Jul 1, 2021, 10:39 AM
wow
Jul 1, 2021, 10:39 AM
the power of groq is unbelievable
Jul 1, 2021, 10:40 AM
thanks for your time buddy
Jul 1, 2021, 10:44 AM
you saved my day
Jul 1, 2021, 10:44 AM
My pleasure!
Jul 1, 2021, 10:51 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.

Get started for freeExplore the demo

Was this answer helpful?