Creating a title string for GROQ queries in React components

Hello! I am wondering if it is possible to create a GROQ query that returns the title property of a field?

Can you specify a little?

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"
}

As far as i know you can only get the string that you write in the field..

Like this

What use case is this for?

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.

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.

Dont quite understand what you are looking for 🤷‍♂️

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.

Would it work to query for if it has a title?

*[title != null]

maybe?

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.

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.

{

name: 'phone',
type: 'string',
title: 'Phone',
},

If you want a label for the string field, i would do this on the frontend

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.

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:

{

}

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.

So yes I think you understood correctly and my best approach is to create a new field in my schema to query for.

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.

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.

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.

Anyways my original question was answered awhile ago 😂 but I really do appreciate all the input!

Sounds good! Thank you both for a good discussion. 😀

You aswell!