Fetching notifications on socket event

What I'm trying to do is get a Mantine popup notification when I get a new Notification from Novu. Here is what I'm trying to do (code below). Yet when I log out the notifications, it's just an empty array, even after the refetch() call. Any ideas?

  const { socket: novuSocket } = useSocket();
  const { notifications, refetch, markAsSeen } = useNotifications();

  const handleNewNotification = async () => {
    await refetch();
    console.log(notifications)
    notifications.forEach((n) => {
      showNotification({
        id: n._id,
        title: 'New Notification',
        message: `${n.content}`,
        autoClose: false,
        onClose: ({ id }) => {
          markAsSeen(id);
        }
      })
    })
  }

  useEffect(() => {
    if (novuSocket) {
      novuSocket.on('unseen_count_changed', async (data) => {
        console.log(data);
        handleNewNotification();
      });
    }

    return () => {
      if (novuSocket) {
        novuSocket.off('unseen_count_changed');
      }
    }
  }, [novuSocket])
Was this page helpful?