Skip to main content

useCmsDocument

Loads one published CMS document from a collection by slug.

When to use it​

An undefined or empty slug disables the request. Locale defaults to the runtime locale; options can scope tenant and environment or allow signed-out reads.

Setup​

Call it from a client-side React component below OvokProvider so it uses the client configured at that provider boundary.

Hook arguments​

ArgumentTypeDetails
collectionstringCMS collection containing the document.
slugstring | undefinedDocument slug; an undefined or empty slug disables the request.
options (optional)OvokCmsOptionsLocale, tenant, environment, and signed-out access options.

TypeScript signature​

<T extends object = OvokCmsDocument>(collection: string, slug: string | undefined, options?: OvokCmsOptions): OvokRequestState<T>

Request state​

The response payload is T. A successful empty result, a failed request, and a request that has not returned data are distinct states.

FieldMeaning
dataLatest successful response, or undefined before one is available.
loadingWhether the request is in progress.
errorRequest error as an Error, or undefined when no request has failed.
reloadRepeats the request with the current arguments.

Request behavior​

The hook loads when its required inputs are available and reloads when those inputs change. Use reload for an explicit refresh; render loading, error, and successful no-result states separately.

Example​

Handle the hook's loading and error states before rendering the result.

import { useCmsDocument } from '@ovok/core';

export function CmsDocumentExample({ collection, slug, options }: { collection: Parameters<typeof useCmsDocument>[0]; slug: Parameters<typeof useCmsDocument>[1]; options?: Parameters<typeof useCmsDocument>[2] }) {
  const { data, loading, error, reload } = useCmsDocument(collection, slug, options);
  if (loading) return <p>Loading…</p>;
  if (error) return <p role="alert">{error.message}</p>;
  return <section><button onClick={reload}>Reload</button><pre>{JSON.stringify(data, null, 2)}</pre></section>;
}