@void-snippets/react

useGet

Single-item query hook — auto-disabled when id is empty.

#What it does

Fetches a single item by ID. Automatically disables itself when the ID is absent — no conditional hook calls, no if (id) guards, no stale data flashes.

#Signature

typescript

contactHooks.useGet(
  id:        Contact.Id | undefined | null | '',
  staleTime?: number,
): VSUseGetReturn<Contact.Detail>

#Parameters

Parameter	Type	Default	Description
`id`	`TId \| undefined \| null \| ''`	required	The item's ID. Query is disabled automatically when this is falsy.
`staleTime`	`number` (ms)	`30_000`	How long the cached result stays fresh before a background refetch.

#Return values

Field	Type	Description
`item`	`TDetail \| undefined`	The fetched item. `undefined` while loading or when the query is disabled.
`isLoading`	`boolean`	`true` on first fetch when there is no cached data.
`isFetching`	`boolean`	`true` during any network request for this item.
`isRefetching`	`boolean`	`true` during a background refetch while `item` is already showing.
`isError`	`boolean`	`true` when the last fetch failed.
`error`	`Error \| null`	The error from the last failed fetch.
`refetch`	`function`	Manually re-fetch this item.

#Example

tsx

function ContactDetailPage() {
  const { contactId } = useParams();

  // useGet stays disabled until contactId is defined
  const { item: contact, isLoading, isError, error, refetch } = contactHooks.useGet(
    contactId ? stringToId<Contact.Id>(contactId) : undefined,
  );

  if (isLoading) return <DetailSkeleton />;
  if (isError)   return <ErrorBanner message={error?.message} onRetry={refetch} />;
  if (!contact)  return null;

  return (
    <div>
      <h1>{contact.name}</h1>
      <p>{contact.email}</p>
      <p>Created by: {contact.createdBy.name}</p>
      <p>Notes: {contact.notes}</p>
    </div>
  );
}