The document handle for the document you want to infer preview values for, and an optional ref
The inferred values for the given document and a boolean to indicate whether the resolution is pending
Values returned by this hook may not be as expected. It is currently unable to read preview values as defined in your schema; instead, it attempts to infer these preview values by checking against a basic set of potential fields on your document. We are anticipating being able to significantly improve this hook’s functionality and output in a future release. For now, we recommend using useDocumentProjection for rendering individual document fields (or projections of those fields).
// PreviewComponent.jsx
export default function PreviewComponent({ document }) {
const { data: { title, subtitle, media }, isPending } = useDocumentPreview({ document })
return (
<article style={{ opacity: isPending ? 0.5 : 1}}>
{media?.type === 'image-asset' ? <img src={media.url} alt='' /> : ''}
<h2>{title}</h2>
<p>{subtitle}</p>
</article>
)
}
// DocumentList.jsx
const { data } = useDocuments({ filter: '_type == "movie"' })
return (
<div>
<h1>Movies</h1>
<ul>
{data.map(movie => (
<li key={movie._id}>
<Suspense fallback='Loading…'>
<PreviewComponent document={movie} />
</Suspense>
</li>
))}
</ul>
</div>
)
Attempts to infer preview values of a document (specified via a
DocumentHandle), including the document’stitle,subtitle,media, andstatus. These values are live and will update in realtime. To reduce unnecessary network requests for resolving the preview values, an optionalrefcan be passed to the hook so that preview resolution will only occur if therefis intersecting the current viewport.See remarks below for futher information.