# notification (https://docs.salla.dev/twilight/react/api/modules/notification)



Use `notification` for a notifications page or a bell icon.

```tsx title="app/components/NotificationsBell.tsx"
import { useQuery, useQueryClient } from '@tanstack/react-query';
import { notification } from '@salla.sa/twilight-theme-engine/api/notification';

export function NotificationsBell() {
  const queryClient = useQueryClient();
  const { data } = useQuery(notification.queries.list());

  async function read(id: number) {
    await notification.markAsRead(id);
    await queryClient.invalidateQueries({ queryKey: notification.queries.list().queryKey });
  }

  return (
    <ul>
      {data?.data.map((item) => (
        <li key={item.id}>
          <button onClick={() => read(item.id)}>Mark as read</button>
        </li>
      ))}
    </ul>
  );
}
```

## Methods [#methods]

| Method                       | Parameters   | Returns                              | Request                       | Login needed |
| ---------------------------- | ------------ | ------------------------------------ | ----------------------------- | ------------ |
| `notification.list`          | none         | `Promise<NotificationsListResponse>` | `GET notifications`           | Yes          |
| `notification.markAsRead`    | `id: number` | `Promise<void>`                      | `PUT notifications/{id}/read` | Yes          |
| `notification.markAllAsRead` | none         | `Promise<void>`                      | `PUT notifications/read-all`  | Yes          |

`NotificationsListResponse` is `{ data: Notification[]; cursor: { current: number; previous: number | null; next: number | null; count: number } }`.

## Queries [#queries]

`notification.queries.list()` has the key `['notifications', 'list']`. It includes no locale, scope or customer, so clear it on logout and refetch it after a language change.

In a loader, turn a guest into the unauthorized page:

```ts title="app/routes/account.notifications.tsx"
import { notification } from '@salla.sa/twilight-theme-engine/api/notification';
import { orUnauthorized } from '@salla.sa/twilight-theme-engine/providers';

loader: async () => {
  const response = await orUnauthorized(notification.list());
  return { notifications: response.data };
},
```

## Gotchas [#gotchas]

* The module does not check for a token. A guest request is rejected by the API.
* When the API returns `data: null`, `list` returns `data: []`.
* `list` takes no cursor argument, so it reads only the first page.
* The mutations return nothing and do not touch the cache. Invalidate `notification.queries.list()` yourself.
* Non-2xx responses throw `HTTPError`. The client retries `PUT` on 5xx and 429 ([Errors](https://docs.salla.dev/twilight/react/api/errors-timeouts-and-retries)).

## See also [#see-also]

* [Notifications route](https://docs.salla.dev/twilight/react/routes/account-notifications)
* [Authentication and scope](https://docs.salla.dev/twilight/react/api/authentication-and-scope)