notification
Lists the customer's account notifications and marks them as read.
Use notification for a notifications page or a bell icon.
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
| 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
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:
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
- The module does not check for a token. A guest request is rejected by the API.
- When the API returns
data: null,listreturnsdata: []. listtakes 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 retriesPUTon 5xx and 429 (Errors).