Displaying the createdAt field in Sanity Studio using a custom component
19 replies
Last updated: Apr 13, 2022
might be a dumb question but is there a way to show the
createdAtfield of a document in the studio
Apr 13, 2022, 4:28 PM
M
If you want to show it in the preview, you could use the
_createdAtinside the preview section of the schema.
preview: {
select: {
title: "title"
created: "_createdAt",
},
prepare({ title, created }) {
return {
title: title
subtitle: created
}
}
},Apr 13, 2022, 4:47 PM
M
I usually just check the version history to see when it was created/last edited
Apr 13, 2022, 4:47 PM
user J
thanks for this. is there a way to display it as a field in the doc tho as well?Apr 13, 2022, 4:49 PM
we use the
createdAtas a submission date as well
Apr 13, 2022, 4:49 PM
M
Technically yes, but you may need to create a custom component in order to query the document and get the _createdAt date within the document
Apr 13, 2022, 5:08 PM
M
I’m not sure if there is a way to query the current document values inside an
initialValuefunction, but if there is that could work by setting the initial value on a datetime field when the doc is created
Apr 13, 2022, 5:09 PM
Something like this will show your
_createdAtfield:
import React from 'react';
import { Card, Text } from '@sanity/ui';
import { withDocument } from 'part:@sanity/form-builder';
const CreatedAt = React.forwardRef((props, ref) => {
return (
<Card padding={[3, 3, 4]} radius={2} shadow={1} tone='positive'>
<Text align='center' size={[2, 2, 3]}>
Created at {props.document._createdAt}
</Text>
</Card>
);
});
export default withDocument(CreatedAt);Apr 13, 2022, 5:12 PM
user M
ohhh i like this! would this be a custom component?Apr 13, 2022, 5:13 PM
Exactly. You'd have to import it and set up a field in your schema.
You wouldn't actually be able to write anything to the field since there are no inputs in the component, so the field would never actually show up in your data.
{
name: 'createdAtDisplay',
title: 'Created At Display',
type: 'string',
inputComponent: CreatedAt
}Apr 13, 2022, 5:16 PM
M
Works great
Apr 13, 2022, 5:17 PM
oh nice!
Apr 13, 2022, 5:18 PM
M
user M
Is it possible to do a groq query in this component?Apr 13, 2022, 5:22 PM
M
I tried
but the async inside forwardRef seems to make Studio angry
import sanityClient from 'part:@sanity/base/client'
export const client = sanityClient.withConfig({
apiVersion: '2022-03-28',
})
const CreatedAt = React.forwardRef( async (props, ref) => {
const result = await client.fetch(`*[_type == 'page'] {...}`)
console.log(result)Apr 13, 2022, 5:22 PM
user M
this works like a charmApr 13, 2022, 5:27 PM
user J
I'll plop my queries inside of a useEffect. I just found a component I'm using that does it:
useEffect(() => {
const getSections = async () => {
await studioClient
.fetch(`*[_id == $id][0].sections[].title`, {
id: parent.page._ref || '',
})
.then(setListItems);
};
getSections();
}, []);Apr 13, 2022, 5:38 PM
M
Amazing, this is great, thank you
user M
!Apr 13, 2022, 5:42 PM
You're welcome!
Apr 13, 2022, 5:43 PM
M
The only downside is the slight delay in the data loading from the groq query causing it to be blank then populate, but otherwise works great
Apr 13, 2022, 5:45 PM
True. And if you continue to add a bunch of components into your page it will significantly increase the load time of the document. It's unlikely you'll use enough to make it noticeable, but I store all of my custom inputs in an example document for ease of use when working in the community and it is a beast to load.
Apr 13, 2022, 5:48 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.