Skip to main content
Version: V1

Read Notifications

tip

Install the GraphQL packages before starting this section.

In this section, we'll help you write a simple query to read a user's notifications from the social graph. Also, we will show you how to acknowledge a notification and acknowledge all notifications. Here is an example on how to use these features.

Read notifications

Read Notifications

  1. Connect with User Wallet: Before checking notifications, you need to make sure that their crypto wallets are connected to your application. Check out the tutorial from Connect with User Wallet.

  2. Initialize the GraphQL client:

/src/queries/GetConnections.tsx
const client = new GraphQLClient(CYBERCONNECT_ENDPOINT)
  1. Write a query to get the unreadNotificationCount and the list of the user’s notifications:
/src/queries/GetNotifications.tsx
import { gql } from 'graphql-request'

export const GET_NOTIFICATIONS = gql`
query ($address: String!) {
identity(address: $address, network: ETH) {
unreadNotificationCount
notifications {
pageInfo {
hasNextPage
hasPreviousPage
endCursor
startCursor
}
list {
id
toAddress
network
namespace
hasRead
type
timestamp
... on NewConnectionNotification {
fromAddress
connectionType
}
... on BiConnectReceivedNotification {
fromAddress
}
... on BiConnectAcceptedNotification {
fromAddress
}
}
}
}
}
`

Make sure to check out the full list of fields available in the CyberConnect API.

Acknowledge a Notification

  1. To start, import CyberConnect, Env, and Blockchain into your application from the CyberConnect SDK:
/src/components/Notifications.tsx
import CyberConnect, { Env, Blockchain } from '@cyberlab/cyberconnect'
  1. Before creating a connection, you'll need to instantiate a CyberConnect object and initialize variables namespace, env, chain and provider:
/src/components/FollowButton.tsx
const cyberConnect = new CyberConnect({
namespace: 'CyberConnect',
env: Env.PRODUCTION,
chain: Blockchain.ETH,
provider: window.ethereum,
})
  1. In this tutorial, we'll help you implement a simple button that user can click on and acknowledge a notification. However, you can also acknowledge a portion of notifications because ackNotifications([notificationId]) can take array of notificationId. After clicking, the function ackNotificationsHandler will send a request to MetaMask and, if successful, it will set the notification hasRead to true and alert the user the success message.
/src/components/Notifications.tsx
const ackNotificationsHandler = async (notificationIds) => {
if (!account) return
if (!notificationIds) return

try {
await cyberConnect.ackNotifications(notificationIds)
alert(`Success: you read this notification!`)
await fetchNotificaions(account)
} catch (err) {
alert(`Failed: you have already read this notification!`)
console.error(err.message)
}
}

Acknowledge All Notifications

We can also implement a simple button that user can click on and acknowledge all notifications. After clicking, the function ackAllNotificationsHandler will send a request to MetaMask and, if successful, it will clean all the notifications and set unreadNotificationCount to 0 and alert the user the success message.

/src/components/Notifications.tsx
const ackAllNotificationsHandler = async () => {
if (!account) return
try {
await cyberConnect.ackAllNotifications()
alert(`Success: you cleaned all the notification`)
await fetchNotificaions(account)
} catch (err) {
alert(`Failed: please connect your wallet!`)
console.error(err.message)
}
}

For the full code, please check out the Sandbox example in the below.

Sandbox

You can write your own query in the Playground or experiment with our code in the sandbox below!

Designed by