useLivePreviewDocumentQuery
useLivePreviewDocumentQuery<
TCollectionSlug,TData,TQueryKey>(queryOptions,collectionSlug):LivePreviewDocumentQueryResult<TCollectionSlug>
Defined in: packages/react/src/livePreview/LivePreviewContext.tsx:400
Sugar composing useQuery with useLivePreview for a query that already
resolves to a SINGLE document — a getFirst-style singleton read, or any
lookup by id — rather than the array useLivePreviewQuery narrows.
Exists because the overlay only reaches documents a consumer hands it: a
component fetching an editable document through a plain useQuery is
invisible to live preview, which is why editing a headers document while
previewing the home page changed nothing.
Type Parameters
Section titled “Type Parameters”TCollectionSlug
Section titled “TCollectionSlug”TCollectionSlug extends string = string
TData extends unknown = DocumentByResourceSlug<TCollectionSlug> | null
TQueryKey
Section titled “TQueryKey”TQueryKey extends readonly unknown[] = readonly unknown[]
Parameters
Section titled “Parameters”queryOptions
Section titled “queryOptions”UseQueryOptions<TData, Error, TData, TQueryKey>
The useQuery options for a query resolving to one document.
collectionSlug
Section titled “collectionSlug”TCollectionSlug
The collection that document belongs to.
Returns
Section titled “Returns”LivePreviewDocumentQueryResult<TCollectionSlug>
The query result with data overlaid by any unsaved editor values.
Example
Section titled “Example”const { data: header } = useLivePreviewDocumentQuery( { ...convexQuery(api.headers.getFirst, {}), initialData }, "headers",);