Profile Notifications

Learn how to retrieve notifications for the authenticated user.

When another user interacts with you or your content, the activity is logged and a notification detailing the interaction is stored in the Lens API. You can retrieve these notifications using any of the methods outlined below.

You must be authenticated with the Profile for which you intend to fetch notifications. See Profile Login for more details.

Types of Notifications

There are various types of notifications, each with a slightly different structure, requiring individual handling. The available notification types include:

type Notification =  | ActedNotification // When your publication is acted on  | CommentNotification // When your publication is commented on  | FollowNotification // When your profile is followed  | MentionNotification // When your profile is mentioned  | MirrorNotification // When your publication is mirrored  | QuoteNotification // When your publication is quoted  | ReactionNotification; // When your publication is reacted to

Fetch Notifications

React SDK
JavaScript SDK
API

You can use the useNotifications hook to fetch notifications for the authenticated user.

Available in @lens-protocol/react-web and @lens-protocol/react-native

When it comes to rendering, you might consider creating a helper function that renders a notification based on its type, as shown below.

import { useNotifications, Notification } from '@lens-protocol/react-web';
function Notifications() {  const { data, loading, error } = useNotifications();
  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;
  return (    <div>      {data.map((item) => (        <NotificationItem key={item.id} notification={item} />      ))}    </div>  );}
function NotificationItem({ notification }: { notification: Notification }) {  switch (notification.__typename) {    case 'ActedNotification':      return <div>{/* render notification details */}</div>;    case 'CommentNotification':      return <div>{/* render notification details */}</div>;    case 'FollowNotification':      return <div>{/* render notification details */}</div>;    case 'MentionNotification':      return <div>{/* render notification details */}</div>;    case 'MirrorNotification':      return <div>{/* render notification details */}</div>;    case 'QuoteNotification':      return <div>{/* render notification details */}</div>;    case 'ReactionNotification':      return <div>{/* render notification details */}</div>;  }}

The hook yields a PaginatedReadResult<Notification[]>. For more information on pagination, refer to this guide.