Get help on Discord

Accessing document _id in custom component for querying in Sanity

2 replies
Last updated: Oct 23, 2024
Hi there, I am trying to get the _id of a document inside of a custom component so I can query using that _id. I have tried making a custom input / field but none of the props have the _id (value, document). Does anyone know if this is possible? The code will look something like this to display the custom component:
const GuidesWithChunksInput: React.FC<GuidesWithChunksInputProps> = (props) => {
  const { value, document } = props;
  return (
    <div>
      {document && document._id ? (
        <GuidesWithChunks chunkId={document._id} />
      ) : (
        <div>No chunk ID available</div>
      )}
    </div>
  );
};
AI Update

Perfect! You're on the right track, but you need to use the useFormValue hook to access the document's _id. The props passed to custom input components don't include the full document object by default in Sanity Studio v3.

Here's how to fix your code:

import { useFormValue } from 'sanity'

const GuidesWithChunksInput: React.FC<GuidesWithChunksInputProps> = (props) => {
  const { value } = props;
  const documentId = useFormValue(['_id'])
  
  return (
    <div>
      {documentId ? (
        <GuidesWithChunks chunkId={documentId} />
      ) : (
        <div>No chunk ID available</div>
      )}
    </div>
  );
};

The useFormValue hook lets you access any field value from the current document by passing a path array. To get the document ID, you pass ['_id'].

Important notes:

  1. Draft vs Published IDs: The _id you get might have a drafts. prefix if you're editing a draft document. If you need the published ID without the prefix, you can use the getPublishedId utility:
import { useFormValue } from 'sanity'
import { getPublishedId } from 'sanity'

const GuidesWithChunksInput: React.FC<GuidesWithChunksInputProps> = (props) => {
  const documentId = useFormValue(['_id'])
  const publishedId = documentId ? getPublishedId(documentId) : null
  
  return (
    <div>
      {publishedId ? (
        <GuidesWithChunks chunkId={publishedId} />
      ) : (
        <div>No chunk ID available</div>
      )}
    </div>
  );
};

  1. Accessing other fields: You can use useFormValue to access any field in the document - just pass the field name in the array. For nested fields, use ['parent', 'child', 'fieldName'].

  2. Getting the entire document: If you need the whole document object, pass an empty array: useFormValue([]).

This is the standard approach in Studio v3 - the old props.document pattern from v2 no longer works, which is why you're not seeing the _id in your props.

Schema is looking like this:
{
      name: 'guidesWithChunks',
      type: 'string',
      title: 'Guides containing this chunk:',
      components: {
        field: GuidesWithChunksInput,
      },
    },
nvm it was
useFormValue(['_id'])

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.

Get started for freeExplore the demo

Was this answer helpful?