Get help on Discord

Accessing parent document in child object preview's prepare function

14 replies
Last updated: Jan 28, 2026
Is it possible to refer to the 
document
in the 
preview
of the document (
childObject
-> 
preview
- line with 
if (document.showCorrectness)
)?

export default {
    name: 'parentObject',
    title: 'Parent',
    type: 'document',
    fields: [
        {
            name: 'showCorrectness',
            title: 'Show Correctness',
            type: 'boolean',
        },
        {
            name: 'answers',
            title: 'Answers',
            type: 'array',
            of: [{ type: 'childObject' }],
        },
    ],
};

import React from 'react';

export default {
    name: 'childObject',
    title: 'Child Object',
    type: 'object',
    fields: [
        {
            title: 'Text',
            name: 'text',
            type: 'string',
        },
        {
            title: 'Is correct',
            name: 'isCorrect',
            type: 'boolean',
            hidden: ({ document }) => {
                return !document.showCorrectness;
            },
            validation: (Rule) =>
                Rule.custom((correctness, { document }) => {
                    if (!document.showCorrectness) {
                        return true;
                    }

                    return 'Correctness required';
                }),
        },
    ],
    preview: {
        select: {
            isCorrect: 'isCorrect',
            text: 'text',
        },
        prepare(child) {
            const PARENT_ICON = {
                correct: '✅',
                incorrect: '❌',
                neutral: '🔵',
            };

            let parentIcon = PARENT_ICON.neutral;

            if (document.showCorrectness) {
                parentIcon = child.isCorrect ? PARENT_ICON.correct : PARENT_ICON.incorrect;
            }

            return {
                title: child.text,
                media: <p>{parentIcon}</p>,
            };
        },
    },
};
AI Update

The short answer is no, you cannot directly access the parent document object in the prepare function of a child object's preview configuration. The document variable in your prepare function is undefined because the standard preview select and prepare functions only have access to the fields you explicitly select from the current object.

However, there's a modern solution for Studio v3: use a custom preview component with the useFormValue hook.

Solution: Custom Preview Component (Studio v3)

Instead of using the standard preview.prepare function, create a custom preview component that can access the parent document's fields:

import React from 'react';
import { useFormValue } from 'sanity';

const ChildObjectPreview = (props) => {
  // Access the parent document's showCorrectness field
  const showCorrectness = useFormValue(['showCorrectness']);
  const { isCorrect, text } = props;

  const PARENT_ICON = {
    correct: '✅',
    incorrect: '❌',
    neutral: '🔵',
  };

  let parentIcon = PARENT_ICON.neutral;
  
  if (showCorrectness) {
    parentIcon = isCorrect ? PARENT_ICON.correct : PARENT_ICON.incorrect;
  }

  return props.renderDefault({
    ...props,
    title: text,
    media: <p>{parentIcon}</p>,
  });
};

export default {
  name: 'childObject',
  title: 'Child Object',
  type: 'object',
  fields: [
    // ... your fields
  ],
  components: {
    preview: ChildObjectPreview
  }
};

The useFormValue hook allows you to access any field in the parent document by providing the field path as an array. For accessing nested parent fields, you can use useFormValue(props.path.slice(0, -1)) to get the immediate parent object.

Why the Standard Preview Doesn't Work

The standard preview configuration with select and prepare is designed to work only with the current object's fields and referenced documents. It doesn't have access to the parent document context by design—this keeps previews performant and predictable.

The custom preview component approach is the recommended solution when you need access to parent document fields or other form state in Studio v3.

Show original thread
14 replies

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?