Join our next Developer Virtual Meetup – Live Q&A, Project Showcase, Swag raffle, and more 🔥

Creating a title string for GROQ queries in React components

24 replies
Last updated: Dec 6, 2022
Hello! I am wondering if it is possible to create a GROQ query that returns the title property of a field?
Dec 6, 2022, 6:39 PM
Can you specify a little?
Dec 6, 2022, 6:41 PM
If I have schema type of string I am required to provide a title property that is returned to me as the key in the results of a GROQ query. I am wondering if it is possible to return the corresponding title field as well. Like this:
{
key: 'string'
title: "title"
}
Dec 6, 2022, 6:43 PM
As far as i know you can only get the string that you write in the field..
Dec 6, 2022, 6:46 PM
Like this
Dec 6, 2022, 6:46 PM
What use case is this for?
Dec 6, 2022, 7:00 PM
The schema informs the Studio but is not accessible from a GROQ query, so unless I’ve misunderstood what you’re after, it won’t be accessible from a query.
Dec 6, 2022, 7:04 PM
user A
Got it. Any suggestions for a field that can replicate what I'm after without adding a title string to the studio? I'm sort of trying to limit user control in this case.
Dec 6, 2022, 7:17 PM
Dont quite understand what you are looking for 🤷‍♂️
Dec 6, 2022, 7:21 PM
Since I cant return a title property in a GROQ query I want to create a title string that I can query for. I don't want it to be user editable so I will likely give it an initialValue and set to hidden, Just wondering if this is the best approach.
Dec 6, 2022, 7:29 PM
Would it work to query for if it has a title?
Dec 6, 2022, 7:30 PM
*[title != null]
maybe?
Dec 6, 2022, 7:30 PM
I'm using the title to pass to components in React. Otherwise I have to hardcode. Currently I am using vanilla JS to take the key from the query and place in a variable but I have to run a function every time.
Dec 6, 2022, 7:37 PM
I’m not entirely sure I’m following—especially as I look back at the initial post and your first reply. Are you wanting
key
to have the value of
title
?
If this is wrong, maybe a bit more explanation and/or some code would help.
Dec 6, 2022, 7:39 PM
{
name: 'phone',
type: 'string',
title: 'Phone',
},
Dec 6, 2022, 7:40 PM
If you want a label for the string field, i would do this on the frontend
Dec 6, 2022, 7:40 PM
Since I cant return a title property in a GROQ query
What I meant was that you can’t return the
title
of a field in your schema (i.e., what you display for that field in the Studio). In case I was unclear, you can return the property value itself.

I want to create a title string that I can query for.
You can create any properties on your documents and objects that you want, and all can be filtered, projected, sorted, etc. in your GROQ queries.
Dec 6, 2022, 7:44 PM
This is an example of field in my schema:
{

name: 'phone',

type: 'string',

title: 'Phone',

},
This is my query:
`const queryInfo = groq``

*[_type == 'info'][0]
```
And this is what it returns:

{

*phone*: "<tel:3333333333|(333) 333-3333>"

}
Which means I can get the value but not the corresponding key unless I use
Object.keys(object)
to get the key for use in a React component.
Dec 6, 2022, 7:45 PM
So yes I think you understood correctly and my best approach is to create a new field in my schema to query for.
Dec 6, 2022, 7:46 PM
Thanks for clarifying. That aligns with what I originally thought you were asking. 👍
In those cases where you want “phone” on your front end, won’t that be hardcoded as Harald mentioned? Since the query will always be for
phone
, the front end wouldn’t have to change.
Dec 6, 2022, 7:47 PM
What he said^ Your component will always take the same object so i would create a hardcoded label. Specially if you dont want a user to edit this.
Dec 6, 2022, 7:50 PM
I have multiple fields like this in my schema so my idea was to pass everything into a component that I repeat in my frontend. I do see your point that either way the information is hardcoded somewhere so maybe I will instead create a generic title for all of my fields and then create a new 'Title' string field that is only editable by me so if I want to make changes later I can make my updates in the studio and not touch my code.
Dec 6, 2022, 7:59 PM
Anyways my original question was answered awhile ago 😂 but I really do appreciate all the input!
Dec 6, 2022, 8:00 PM
Sounds good! Thank you both for a good discussion. 😀
Dec 6, 2022, 8:01 PM
You aswell!
Dec 6, 2022, 8:02 PM

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?