Fetch document field value in Structure Builder's S.view.options

Good news! You can absolutely access the document's data in your custom view component, including the language field. The key is that while getDefaultDocumentNode only receives the document ID, your custom view component (in this case IframePreview) receives much more detailed props, including the actual document data.

Solution: Access Document Data in Your Component

Your IframePreview component receives a document prop that contains the current document's data, including the displayed version. You can access the language field directly from there:

// IframePreview.js
export function IframePreview(props) {
  const { document, options } = props;
  
  // Access the language from the document's displayed version
  const language = document.displayed?.language || 'en';
  const previewURL = options.previewURL;
  
  return (
    <iframe 
      src={`${previewURL}?lang=${language}`}
      // ... other iframe props
    />
  );
}

Structure Builder Configuration

Your getDefaultDocumentNode setup stays simple - just pass the static options you need:

export const getDefaultDocumentNode = (props) => {
  if (props.schemaType === "page") {
    return S.document().views([
      S.view.form().icon(FaEdit).title("Edit"),
      S.view
        .component(IframePreview)
        .options({ previewURL }) // Just pass static config
        .title("Preview")
        .icon(FaEye),
    ]);
  }
};

Component Props Available

Your custom view component receives these useful props:

• document.displayed - The current state of the document being edited (includes all fields like language)
• document.draft - The draft version (if it exists)
• document.published - The published version
• documentId - The document's ID
• schemaType - The schema type
• options - Whatever you passed in .options()

The displayed version is particularly useful because it shows what the editor is currently looking at (draft if it exists, otherwise published).

Live Updates

The component will automatically re-render when the document changes, so if the editor changes the language field, your preview will update accordingly with the new language value.

This approach is much cleaner than trying to run GROQ queries in the Structure Builder configuration - you let Sanity handle the document data flow and just consume it in your component. The Component View documentation covers more about how custom document views work with document data in Sanity Studio.