@haykal/notifications-client

React Query hooks for notifications — list, read, manage preferences, and track unread counts.

Installation

pnpm add @haykal/notifications-client

Setup

import { initMutator } from '@haykal/notifications-client';

initMutator(); // Connects to HaykalClient singleton

Hooks

Notifications

| Hook | Description | | --------------------------------- | ---------------------------------- | | useNotifications() | List notifications (paginated) | | useUnreadNotificationCount() | Get unread notification count | | useMarkNotificationAsRead() | Mark a single notification as read | | useMarkAllNotificationsAsRead() | Mark all notifications as read | | useDeleteNotification() | Delete a notification |

Preferences

| Hook | Description | | ------------------------------------ | ------------------------------------------ | | useNotificationPreferences() | Get user's notification preferences | | useUpdateNotificationPreferences() | Update preferences (per-type, per-channel) |

Usage Examples

Notification Bell

import {
  useUnreadNotificationCount,
  useNotifications,
} from '@haykal/notifications-client';

function NotificationBell() {
  const { data: count } = useUnreadNotificationCount();
  const { data: notifications } = useNotifications();

  return (
    <div>
      <span>Unread: {count?.data ?? 0}</span>
      <ul>
        {notifications?.data?.map((n) => (
          <li key={n.id}>{n.title}</li>
        ))}
      </ul>
    </div>
  );
}

Managing Preferences

import {
  useNotificationPreferences,
  useUpdateNotificationPreferences,
} from '@haykal/notifications-client';

function PreferencesPanel() {
  const { data } = useNotificationPreferences();
  const { mutate } = useUpdateNotificationPreferences();

  return (
    <label>
      <input
        type="checkbox"
        checked={data?.data?.emailEnabled}
        onChange={(e) => mutate({ emailEnabled: e.target.checked })}
      />
      Email notifications
    </label>
  );
}

Regenerating

nx run @haykal/notifications-client:generate

Never edit files in src/generated/ — they are auto-generated by Orval.

Related Packages

• @haykal/notifications-backend — Backend API with multi-channel delivery
• @haykal/core-client — HTTP client and React Query provider

Further Reading

• Client SDK Generation — Orval pipeline and regeneration
• API Reference — Backend endpoints these hooks call