Cord LogoDocs
Sign inStart now

Observe full notification data

Notification API /
Ask the Community

How to use the notification API to observe full notification data

Overview #

This method allows you to observe the available notifications for the current user, including live updates.
React:
import { notification } from '@cord-sdk/react';
const { notifications, loading, hasMore, fetchMore } = notification.useNotifications(
  filter: { metadata: { flavor: 'minty' } } },
);
return (
  <div>
    {notifications.map((notification) => (
      <div key={notification.id}>
        Got notification {notification.id}!
      </div>
    ))}
    {loading ? (
      <div>Loading...</div>
    ) : hasMore ? (
      <div onClick={() => fetchMore(10)}>Fetch 10 more</div>
    ) : null}
  </div>
);
Vanilla JavaScript:
const ref = window.CordSDK.notification.observeNotifications(
  ({ notifications, loading, hasMore, fetchMore }) => {
    console.log('Got a notifications data update:');
    if (loading) {
      console.log('Loading...');
    }
    notifications.forEach((notification) =>
      console.log(`Got notification ${notification.id}!`),
    );
    if (!loading && hasMore && notifications.length < 25) {
      // Get the first 25 notifications, 10 at a time.
      fetchMore(10);
    }
  },
  { filter: { metadata: { flavor: 'minty' } } },
);
import { notification } from '@cord-sdk/react';
const { notifications, loading, hasMore, fetchMore } = notification.useNotifications(
  filter: { metadata: { flavor: 'minty' } } },
);
return (
  <div>
    {notifications.map((notification) => (
      <div key={notification.id}>
        Got notification {notification.id}!
      </div>
    ))}
    {loading ? (
      <div>Loading...</div>
    ) : hasMore ? (
      <div onClick={() => fetchMore(10)}>Fetch 10 more</div>
    ) : null}
  </div>
);
Copy

Available Data #

The API provides an object which has the following fields:

id #

string
The ID for this notification.

senderUserIDs #

string[]
The IDs of the user(s) who sent this notification. The Cord backend will sometimes aggregate multiple notifications together, causing them to have multiple senders. For example, if multiple people react to the same message, that will generate only one notification (but with multiple senders, one for each person who reacted).

iconUrl #

string | null
The URL of an icon image for this notification, if one was specified when it was created. This will always be null for Cord's internally-generated notifications (i.e., it can only be non-null for notifications you create via the REST API).
NotificationHeaderNode[]
The "header" or "text" of the notification. This will represent text like "Alice replied to your thread." or similar. For notifications you create via the REST API, this will be based upon the template parameter, see below.

This is an array of items. Each item can be one of the following:

  • NotificationTextHeader

    This is an object with the following fields:

    Show property details

  • NotificationUserHeader

    This is an object with the following fields:

    Show property details

headerTranslation #

Translation | null
A translation that can be used to translate the header of the notification. All Cord-created notifications will have a translation, but this may be null for notifications you create through the REST API. See the translations documentation for more information.

This is an object with the following fields:

Show property details

attachment #

Additional context attached to the notification. For example, if this notification is about a new reaction on a message, the attachment will specify what message received that new reaction.
A renderer will typically check the type field of the attachment and render that attachment type below the header.
We may include other types of attachments in the future and therefore recommend having a default case when handling the attachment types.

This property can be one of the following:

  • null
  • NotificationURLAttachment

    This is an object with the following fields:

    Show property details

  • NotificationMessageAttachment

    This is an object with the following fields:

    Show property details

  • NotificationThreadAttachment

    This is an object with the following fields:

    Show property details

readStatus #

"unread" | "read"
Whether this notification has been read by the recipient yet.

timestamp #

Date
The time this notification was sent.

extraClassnames #

string | null
A space separated list of classnames to add to the notification.

metadata #

EntityMetadata
An arbitrary JSON object specified when the notification was created. This will always be an empty object for Cord's internally-generated notifications (i.e., it can only be non-null for notifications you create via the REST API).

What this function returns #

The hook will return an object containing the fields described under "Available Data" above. The component will automatically re-render if any of the data changes, i.e., this data is always "live".

Arguments this function takes #

options #

optional
ObserveNotificationDataOptions
Miscellaneous options. See below.

This is an object with the following fields:

Show property details

Not finding the answer you need? Ask our Developer Community

Ask Cordy