---
title: Notifications
description: Connect notification state without coupling the UI to a backend.
order: 20
toc:
  - id: notifications-query
    title: Notifications query
---

## Notifications query {#notifications-query}

Notifications use TanStack Query as their data boundary:

```tsx
const notifications = useNotifications({
  queryKey: ["notifications"],
  queryFn: loadNotifications,
})
```

The result includes unread counts, optimistic read-state updates, action execution, refetching, and pending or error status. `AppLayout` can create the sheet directly from the same query options.