Go Behind the Experience to see how Tecovas brings the West to life with Sanity 🤠 July 18th

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
createdAt
field of a document in the studio
Apr 13, 2022, 4:28 PM
If you want to show it in the preview, you could use the
_createdAt
inside 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
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
createdAt
as a submission date as well
Apr 13, 2022, 4:49 PM
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
I’m not sure if there is a way to query the current document values inside an
initialValue
function, 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
_createdAt
field:
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.
{
  name: 'createdAtDisplay',
  title: 'Created At Display',
  type: 'string',
  inputComponent: CreatedAt
}
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.
Apr 13, 2022, 5:16 PM
Works great
Apr 13, 2022, 5:17 PM
oh nice!
Apr 13, 2022, 5:18 PM
user M
Is it possible to do a groq query in this component?
Apr 13, 2022, 5:22 PM
I tried
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)
but the async inside forwardRef seems to make Studio angry
Apr 13, 2022, 5:22 PM
user M
this works like a charm
Apr 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
Amazing, this is great, thank you
user M
!
Apr 13, 2022, 5:42 PM
You're welcome!
Apr 13, 2022, 5:43 PM
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.

Was this answer helpful?