How to Concatenate String Fields in a Schema
You can show the full name in the list preview.
Or a bit harder: you can code a custom input component that displays the full name direclty in the editor.
And don't worry about querying the data, you can easily form the full name directly inside the GROQ query, no need to build that value on the front-end.
useEffect(() => {
sanityClient
.fetch(`*[_type == "employee"]{
name,
slug,
jobTitle,
emailAddress,
mobilePhoneNumber,
photo{
asset->{
_id,
url
},
alt,
hotspot
}
}`)
.then((data) => {
const sortedData = data.sort((a,b) => {
return a.name.firstName.localeCompare(b.name.firstName, 'nb');
});
setEmployeeList(sortedData);
}, [])
.catch(console.error);
}, []);*[_type == "employee"]{
"name": firstname + ' ' + middlename + ' ' + lastname,
slug,
jobTitle,
emailAddress,
mobilePhoneNumber,
photo{
asset->{
_id,
url
},
alt,
hotspot
}
}coalescefunction, but then the query gets complicated
coalesce. Made it easy to check on a null value (i.e. middleName not being added). This GROQ works well:
sanityClient
.fetch(`*[_type == "employee"] | order(name.firstName){
name{
firstName,
middleName,
lastName,
"fullName": firstName + " " + coalesce(middleName + " ", "") + lastName
},
slug,
jobTitle,
emailAddress,
mobilePhoneNumber,
photo{
asset->{
_id,
url
},
alt,
hotspot
},
}`)Was this answer helpful?
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.