How to get a notifications list by feed on react app

Jauhari · 2024-06-28T09:39:51.845Z

Hello Team!, So i have 2 feed identifier `market` and `trigger` and i use 2 different `useFetchNotification` hook to fetch the notifications with 2 different feed identifier but somehow the data got replaced by one and another its either `market` or `trigger`, `market` feed is used for the entirety of the app and i want to use novu socket by `trigger` feed to get update to trigger api call

N

Novu_Bot•6/28/24, 9:39 AM

@Jauhari, you just advanced to level 2!

A

Ask Inkeep•6/28/24, 9:39 AM

Hi @Jauhari, I'm an AI assistant for Novu. While a team member reviews this question, I'll see if I can find relevant sources for your question.

A

Ask Inkeep•6/28/24, 9:39 AM

-----------------------------
While I generate an answer, here are some sources that might be helpful:

API Reference
React Get Started
How to send push notifications in an Android app (react native) with FCM and Novu
Customizing Notification Center
-----------------------------

A

Ask Inkeep•6/28/24, 9:40 AM

Answer

Based on the information provided in the documentation sources, I can offer some guidance on how to handle multiple feeds in a React app using Novu. Let's break this down step by step:

Using multiple feeds:
The Novu React library supports configuring multiple feeds (or stores) for different notification types (1) . You can define these stores in the
```
NovuProvider
```
NovuProvider
```
NovuProvider
```
NovuProvider
component .

<NovuProvider
  stores={[
    {
      storeId: "market",
      query: { feedIdentifier: "market" },
    },
    { storeId: "trigger", query: { feedIdentifier: "trigger" } },
  ]}
  subscriberId={"SUBSCRIBER_ID"}
  applicationIdentifier={"APPLICATION_IDENTIFIER"}
>
  {/* Your app components */}
</NovuProvider>

<NovuProvider
  stores={[
    {
      storeId: "market",
      query: { feedIdentifier: "market" },
    },
    { storeId: "trigger", query: { feedIdentifier: "trigger" } },
  ]}
  subscriberId={"SUBSCRIBER_ID"}
  applicationIdentifier={"APPLICATION_IDENTIFIER"}
>
  {/* Your app components */}
</NovuProvider>

<NovuProvider
  stores={[
    {
      storeId: "market",
      query: { feedIdentifier: "market" },
    },
    { storeId: "trigger", query: { feedIdentifier: "trigger" } },
  ]}
  subscriberId={"SUBSCRIBER_ID"}
  applicationIdentifier={"APPLICATION_IDENTIFIER"}
>
  {/* Your app components */}
</NovuProvider>

<NovuProvider
  stores={[
    {
      storeId: "market",
      query: { feedIdentifier: "market" },
    },
    { storeId: "trigger", query: { feedIdentifier: "trigger" } },
  ]}
  subscriberId={"SUBSCRIBER_ID"}
  applicationIdentifier={"APPLICATION_IDENTIFIER"}
>
  {/* Your app components */}
</NovuProvider>

Fetching notifications for different feeds:
You're correct in using the
```
useFetchNotifications
```
useFetchNotifications
```
useFetchNotifications
```
useFetchNotifications
hook to fetch notifications for different feeds. However, the issue you're experiencing where data is being replaced might be related to how you're managing the state for these different feeds (2) .

To fetch notifications for a specific feed, you can use the

useFetchNotifications

useFetchNotifications

useFetchNotifications

useFetchNotifications hook like this:

const { data: marketNotifications } = useFetchNotifications({
  query: { feedIdentifier: "market" }
});

const { data: triggerNotifications } = useFetchNotifications({
  query: { feedIdentifier: "trigger" }
});

const { data: marketNotifications } = useFetchNotifications({
  query: { feedIdentifier: "market" }
});

const { data: triggerNotifications } = useFetchNotifications({
  query: { feedIdentifier: "trigger" }
});

const { data: marketNotifications } = useFetchNotifications({
  query: { feedIdentifier: "market" }
});

const { data: triggerNotifications } = useFetchNotifications({
  query: { feedIdentifier: "trigger" }
});

const { data: marketNotifications } = useFetchNotifications({
  query: { feedIdentifier: "market" }
});

const { data: triggerNotifications } = useFetchNotifications({
  query: { feedIdentifier: "trigger" }
});

Using sockets for real-time updates:
For real-time updates, you can use the
```
useSocket
```
useSocket
```
useSocket
```
useSocket
hook provided by Novu (3) . Here's an example of how you might use it:

A

Ask Inkeep•6/28/24, 9:40 AM

import { useSocket } from "@novu/notification-center";

function YourComponent() {
  const { socket } = useSocket();

  useEffect(() => {
    if (socket) {
      socket.on("notification_received", (data) => {
        console.log(data);
        // Handle the new notification here
        // You might want to check the feed identifier and update the appropriate state
      });
    }
    return () => {
      if (socket) {
        socket.off("notification_received");
      }
    };
  }, [socket]);

  // Rest of your component
}

import { useSocket } from "@novu/notification-center";

function YourComponent() {
  const { socket } = useSocket();

  useEffect(() => {
    if (socket) {
      socket.on("notification_received", (data) => {
        console.log(data);
        // Handle the new notification here
        // You might want to check the feed identifier and update the appropriate state
      });
    }
    return () => {
      if (socket) {
        socket.off("notification_received");
      }
    };
  }, [socket]);

  // Rest of your component
}

import { useSocket } from "@novu/notification-center";

function YourComponent() {
  const { socket } = useSocket();

  useEffect(() => {
    if (socket) {
      socket.on("notification_received", (data) => {
        console.log(data);
        // Handle the new notification here
        // You might want to check the feed identifier and update the appropriate state
      });
    }
    return () => {
      if (socket) {
        socket.off("notification_received");
      }
    };
  }, [socket]);

  // Rest of your component
}

import { useSocket } from "@novu/notification-center";

function YourComponent() {
  const { socket } = useSocket();

  useEffect(() => {
    if (socket) {
      socket.on("notification_received", (data) => {
        console.log(data);
        // Handle the new notification here
        // You might want to check the feed identifier and update the appropriate state
      });
    }
    return () => {
      if (socket) {
        socket.off("notification_received");
      }
    };
  }, [socket]);

  // Rest of your component
}

However, it's important to note that there have been some reported issues with handling multiple feeds simultaneously (4) . Some users have experienced intermittent failures to load when visiting multiple feeds at the same time. A workaround suggested is to avoid nesting providers component-wise .

Given the complexity of your use case and the potential issues with multiple feeds, you might want to consider alternative approaches. For instance, you could use a single feed and differentiate notifications using payload data, or you could use topics instead of feeds for organization-wide notifications 💬│supportSet feed dynamically using trigger override .

If you're still experiencing issues after trying these approaches, it might be worth clicking on the "Ask for help" button to tag a team member for a more detailed review of your specific implementation.

Sources
[1] Configuring Multiple Tabs
[2] API Reference
[3] React Get Started
[4] [NV-2155] Bug Report: Intermittent failure to load when visiting multiple feeds simultaneously
[5] Set feed dynamically using trigger override

J

JauhariOP•6/28/24, 9:47 AM

solution 1 & 2 doenst work still gives me same result

AAsk Inkeep ```jsx import { useSocket } from "@novu/notification-center"; function YourComp...

A

Ask InkeepAPP•6/28/24, 9:47 AM

Got it. Tagging @Support for additional help.

P

Pawan Jain•7/1/24, 12:25 PM

@Jauhari
Please make sure feedIdentifier value is correct

J

JauhariOP•7/1/24, 12:34 PM

it is correct

P

Pawan Jain•7/1/24, 12:35 PM

@Jauhari

go to network tab and copy the request as curl and paste it her (hide any sensitive info)

J

JauhariOP•7/1/24, 12:37 PM

please wait

J

JauhariOP•7/2/24, 2:36 AM

sorry for the late response it was night over here and my co-worker unable to reached that time, here is the curl

Trigger

curl 'https://api-novu.eproc.dev/v1/widgets/notifications/feed?page=0&feedIdentifier=trigger&limit=10' \
  -H 'accept: application/json, text/plain, /' \
  -H 'accept-language: en-US,en;q=0.9' \
  -H 'authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJfaWQiOiI2NTljZGE2N2ZhYjBmMjNkOGJiYWQxOTEiLCJmaXJzdE5hbWUiOiJQZXJzb25hIFBQIEIiLCJlbWFpbCI6InBlcnNvbmFwcDJAbWFpbG5lc2lhLmNvbSIsIm9yZ2FuaXphdGlvbklkIjoiNjQyMmE1NDAxOWQ1NmVkYzBlZTc0NWMxIiwiZW52aXJvbm1lbnRJZCI6IjY0MjJhNTQwMTlkNTZlZGMwZWU3NDVjNyIsInN1YnNjcmliZXJJZCI6IjAxSEtQQkE3S1FGUlRCRjFBTU5BWDBSUDQwIiwiaWF0IjoxNzE5ODg3MzAxLCJleHAiOjE3MjExODMzMDEsImF1ZCI6IndpZGdldF91c2VyIiwiaXNzIjoibm92dV9hcGkifQ.KjFpscJkye-SIWZl5TWWCy5xHjMrDCidL6CtrRDu-5A' \
  -H 'if-none-match: W/"2ec9-o3NhCdhEnbbIgJEjGyof6jLjaiM"' \
  -H 'origin: http://localhost:3000' \
  -H 'priority: u=1, i' \
  -H 'referer: http://localhost:3000/' \
  -H 'sec-ch-ua: "Not/A)Brand";v="8", "Chromium";v="126", "Google Chrome";v="126"' \
  -H 'sec-ch-ua-mobile: ?0' \
  -H 'sec-ch-ua-platform: "macOS"' \
  -H 'sec-fetch-dest: empty' \
  -H 'sec-fetch-mode: cors' \
  -H 'sec-fetch-site: cross-site' \
  -H 'user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36'

curl 'https://api-novu.eproc.dev/v1/widgets/notifications/feed?page=0&feedIdentifier=trigger&limit=10' \
  -H 'accept: application/json, text/plain, /' \
  -H 'accept-language: en-US,en;q=0.9' \
  -H 'authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJfaWQiOiI2NTljZGE2N2ZhYjBmMjNkOGJiYWQxOTEiLCJmaXJzdE5hbWUiOiJQZXJzb25hIFBQIEIiLCJlbWFpbCI6InBlcnNvbmFwcDJAbWFpbG5lc2lhLmNvbSIsIm9yZ2FuaXphdGlvbklkIjoiNjQyMmE1NDAxOWQ1NmVkYzBlZTc0NWMxIiwiZW52aXJvbm1lbnRJZCI6IjY0MjJhNTQwMTlkNTZlZGMwZWU3NDVjNyIsInN1YnNjcmliZXJJZCI6IjAxSEtQQkE3S1FGUlRCRjFBTU5BWDBSUDQwIiwiaWF0IjoxNzE5ODg3MzAxLCJleHAiOjE3MjExODMzMDEsImF1ZCI6IndpZGdldF91c2VyIiwiaXNzIjoibm92dV9hcGkifQ.KjFpscJkye-SIWZl5TWWCy5xHjMrDCidL6CtrRDu-5A' \
  -H 'if-none-match: W/"2ec9-o3NhCdhEnbbIgJEjGyof6jLjaiM"' \
  -H 'origin: http://localhost:3000' \
  -H 'priority: u=1, i' \
  -H 'referer: http://localhost:3000/' \
  -H 'sec-ch-ua: "Not/A)Brand";v="8", "Chromium";v="126", "Google Chrome";v="126"' \
  -H 'sec-ch-ua-mobile: ?0' \
  -H 'sec-ch-ua-platform: "macOS"' \
  -H 'sec-fetch-dest: empty' \
  -H 'sec-fetch-mode: cors' \
  -H 'sec-fetch-site: cross-site' \
  -H 'user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36'

curl 'https://api-novu.eproc.dev/v1/widgets/notifications/feed?page=0&feedIdentifier=trigger&limit=10' \
  -H 'accept: application/json, text/plain, /' \
  -H 'accept-language: en-US,en;q=0.9' \
  -H 'authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJfaWQiOiI2NTljZGE2N2ZhYjBmMjNkOGJiYWQxOTEiLCJmaXJzdE5hbWUiOiJQZXJzb25hIFBQIEIiLCJlbWFpbCI6InBlcnNvbmFwcDJAbWFpbG5lc2lhLmNvbSIsIm9yZ2FuaXphdGlvbklkIjoiNjQyMmE1NDAxOWQ1NmVkYzBlZTc0NWMxIiwiZW52aXJvbm1lbnRJZCI6IjY0MjJhNTQwMTlkNTZlZGMwZWU3NDVjNyIsInN1YnNjcmliZXJJZCI6IjAxSEtQQkE3S1FGUlRCRjFBTU5BWDBSUDQwIiwiaWF0IjoxNzE5ODg3MzAxLCJleHAiOjE3MjExODMzMDEsImF1ZCI6IndpZGdldF91c2VyIiwiaXNzIjoibm92dV9hcGkifQ.KjFpscJkye-SIWZl5TWWCy5xHjMrDCidL6CtrRDu-5A' \
  -H 'if-none-match: W/"2ec9-o3NhCdhEnbbIgJEjGyof6jLjaiM"' \
  -H 'origin: http://localhost:3000' \
  -H 'priority: u=1, i' \
  -H 'referer: http://localhost:3000/' \
  -H 'sec-ch-ua: "Not/A)Brand";v="8", "Chromium";v="126", "Google Chrome";v="126"' \
  -H 'sec-ch-ua-mobile: ?0' \
  -H 'sec-ch-ua-platform: "macOS"' \
  -H 'sec-fetch-dest: empty' \
  -H 'sec-fetch-mode: cors' \
  -H 'sec-fetch-site: cross-site' \
  -H 'user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36'

curl 'https://api-novu.eproc.dev/v1/widgets/notifications/feed?page=0&feedIdentifier=trigger&limit=10' \
  -H 'accept: application/json, text/plain, /' \
  -H 'accept-language: en-US,en;q=0.9' \
  -H 'authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJfaWQiOiI2NTljZGE2N2ZhYjBmMjNkOGJiYWQxOTEiLCJmaXJzdE5hbWUiOiJQZXJzb25hIFBQIEIiLCJlbWFpbCI6InBlcnNvbmFwcDJAbWFpbG5lc2lhLmNvbSIsIm9yZ2FuaXphdGlvbklkIjoiNjQyMmE1NDAxOWQ1NmVkYzBlZTc0NWMxIiwiZW52aXJvbm1lbnRJZCI6IjY0MjJhNTQwMTlkNTZlZGMwZWU3NDVjNyIsInN1YnNjcmliZXJJZCI6IjAxSEtQQkE3S1FGUlRCRjFBTU5BWDBSUDQwIiwiaWF0IjoxNzE5ODg3MzAxLCJleHAiOjE3MjExODMzMDEsImF1ZCI6IndpZGdldF91c2VyIiwiaXNzIjoibm92dV9hcGkifQ.KjFpscJkye-SIWZl5TWWCy5xHjMrDCidL6CtrRDu-5A' \
  -H 'if-none-match: W/"2ec9-o3NhCdhEnbbIgJEjGyof6jLjaiM"' \
  -H 'origin: http://localhost:3000' \
  -H 'priority: u=1, i' \
  -H 'referer: http://localhost:3000/' \
  -H 'sec-ch-ua: "Not/A)Brand";v="8", "Chromium";v="126", "Google Chrome";v="126"' \
  -H 'sec-ch-ua-mobile: ?0' \
  -H 'sec-ch-ua-platform: "macOS"' \
  -H 'sec-fetch-dest: empty' \
  -H 'sec-fetch-mode: cors' \
  -H 'sec-fetch-site: cross-site' \
  -H 'user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36'

Govmart - (before was market)

curl 'https://api-novu.eproc.dev/v1/widgets/notifications/feed?page=0&feedIdentifier=govmart&limit=10' \
  -H 'accept: application/json, text/plain, /' \
  -H 'accept-language: en-US,en;q=0.9' \
  -H 'authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJfaWQiOiI2NTljZGE2N2ZhYjBmMjNkOGJiYWQxOTEiLCJmaXJzdE5hbWUiOiJQZXJzb25hIFBQIEIiLCJlbWFpbCI6InBlcnNvbmFwcDJAbWFpbG5lc2lhLmNvbSIsIm9yZ2FuaXphdGlvbklkIjoiNjQyMmE1NDAxOWQ1NmVkYzBlZTc0NWMxIiwiZW52aXJvbm1lbnRJZCI6IjY0MjJhNTQwMTlkNTZlZGMwZWU3NDVjNyIsInN1YnNjcmliZXJJZCI6IjAxSEtQQkE3S1FGUlRCRjFBTU5BWDBSUDQwIiwiaWF0IjoxNzE5ODg3MzAxLCJleHAiOjE3MjExODMzMDEsImF1ZCI6IndpZGdldF91c2VyIiwiaXNzIjoibm92dV9hcGkifQ.KjFpscJkye-SIWZl5TWWCy5xHjMrDCidL6CtrRDu-5A' \
  -H 'if-none-match: W/"2ec9-o3NhCdhEnbbIgJEjGyof6jLjaiM"' \
  -H 'origin: http://localhost:3000' \
  -H 'priority: u=1, i' \
  -H 'referer: http://localhost:3000/' \
  -H 'sec-ch-ua: "Not/A)Brand";v="8", "Chromium";v="126", "Google Chrome";v="126"' \
  -H 'sec-ch-ua-mobile: ?0' \
  -H 'sec-ch-ua-platform: "macOS"' \
  -H 'sec-fetch-dest: empty' \
  -H 'sec-fetch-mode: cors' \
  -H 'sec-fetch-site: cross-site' \
  -H 'user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36'

curl 'https://api-novu.eproc.dev/v1/widgets/notifications/feed?page=0&feedIdentifier=govmart&limit=10' \
  -H 'accept: application/json, text/plain, /' \
  -H 'accept-language: en-US,en;q=0.9' \
  -H 'authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJfaWQiOiI2NTljZGE2N2ZhYjBmMjNkOGJiYWQxOTEiLCJmaXJzdE5hbWUiOiJQZXJzb25hIFBQIEIiLCJlbWFpbCI6InBlcnNvbmFwcDJAbWFpbG5lc2lhLmNvbSIsIm9yZ2FuaXphdGlvbklkIjoiNjQyMmE1NDAxOWQ1NmVkYzBlZTc0NWMxIiwiZW52aXJvbm1lbnRJZCI6IjY0MjJhNTQwMTlkNTZlZGMwZWU3NDVjNyIsInN1YnNjcmliZXJJZCI6IjAxSEtQQkE3S1FGUlRCRjFBTU5BWDBSUDQwIiwiaWF0IjoxNzE5ODg3MzAxLCJleHAiOjE3MjExODMzMDEsImF1ZCI6IndpZGdldF91c2VyIiwiaXNzIjoibm92dV9hcGkifQ.KjFpscJkye-SIWZl5TWWCy5xHjMrDCidL6CtrRDu-5A' \
  -H 'if-none-match: W/"2ec9-o3NhCdhEnbbIgJEjGyof6jLjaiM"' \
  -H 'origin: http://localhost:3000' \
  -H 'priority: u=1, i' \
  -H 'referer: http://localhost:3000/' \
  -H 'sec-ch-ua: "Not/A)Brand";v="8", "Chromium";v="126", "Google Chrome";v="126"' \
  -H 'sec-ch-ua-mobile: ?0' \
  -H 'sec-ch-ua-platform: "macOS"' \
  -H 'sec-fetch-dest: empty' \
  -H 'sec-fetch-mode: cors' \
  -H 'sec-fetch-site: cross-site' \
  -H 'user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36'

curl 'https://api-novu.eproc.dev/v1/widgets/notifications/feed?page=0&feedIdentifier=govmart&limit=10' \
  -H 'accept: application/json, text/plain, /' \
  -H 'accept-language: en-US,en;q=0.9' \
  -H 'authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJfaWQiOiI2NTljZGE2N2ZhYjBmMjNkOGJiYWQxOTEiLCJmaXJzdE5hbWUiOiJQZXJzb25hIFBQIEIiLCJlbWFpbCI6InBlcnNvbmFwcDJAbWFpbG5lc2lhLmNvbSIsIm9yZ2FuaXphdGlvbklkIjoiNjQyMmE1NDAxOWQ1NmVkYzBlZTc0NWMxIiwiZW52aXJvbm1lbnRJZCI6IjY0MjJhNTQwMTlkNTZlZGMwZWU3NDVjNyIsInN1YnNjcmliZXJJZCI6IjAxSEtQQkE3S1FGUlRCRjFBTU5BWDBSUDQwIiwiaWF0IjoxNzE5ODg3MzAxLCJleHAiOjE3MjExODMzMDEsImF1ZCI6IndpZGdldF91c2VyIiwiaXNzIjoibm92dV9hcGkifQ.KjFpscJkye-SIWZl5TWWCy5xHjMrDCidL6CtrRDu-5A' \
  -H 'if-none-match: W/"2ec9-o3NhCdhEnbbIgJEjGyof6jLjaiM"' \
  -H 'origin: http://localhost:3000' \
  -H 'priority: u=1, i' \
  -H 'referer: http://localhost:3000/' \
  -H 'sec-ch-ua: "Not/A)Brand";v="8", "Chromium";v="126", "Google Chrome";v="126"' \
  -H 'sec-ch-ua-mobile: ?0' \
  -H 'sec-ch-ua-platform: "macOS"' \
  -H 'sec-fetch-dest: empty' \
  -H 'sec-fetch-mode: cors' \
  -H 'sec-fetch-site: cross-site' \
  -H 'user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36'

curl 'https://api-novu.eproc.dev/v1/widgets/notifications/feed?page=0&feedIdentifier=govmart&limit=10' \
  -H 'accept: application/json, text/plain, /' \
  -H 'accept-language: en-US,en;q=0.9' \
  -H 'authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJfaWQiOiI2NTljZGE2N2ZhYjBmMjNkOGJiYWQxOTEiLCJmaXJzdE5hbWUiOiJQZXJzb25hIFBQIEIiLCJlbWFpbCI6InBlcnNvbmFwcDJAbWFpbG5lc2lhLmNvbSIsIm9yZ2FuaXphdGlvbklkIjoiNjQyMmE1NDAxOWQ1NmVkYzBlZTc0NWMxIiwiZW52aXJvbm1lbnRJZCI6IjY0MjJhNTQwMTlkNTZlZGMwZWU3NDVjNyIsInN1YnNjcmliZXJJZCI6IjAxSEtQQkE3S1FGUlRCRjFBTU5BWDBSUDQwIiwiaWF0IjoxNzE5ODg3MzAxLCJleHAiOjE3MjExODMzMDEsImF1ZCI6IndpZGdldF91c2VyIiwiaXNzIjoibm92dV9hcGkifQ.KjFpscJkye-SIWZl5TWWCy5xHjMrDCidL6CtrRDu-5A' \
  -H 'if-none-match: W/"2ec9-o3NhCdhEnbbIgJEjGyof6jLjaiM"' \
  -H 'origin: http://localhost:3000' \
  -H 'priority: u=1, i' \
  -H 'referer: http://localhost:3000/' \
  -H 'sec-ch-ua: "Not/A)Brand";v="8", "Chromium";v="126", "Google Chrome";v="126"' \
  -H 'sec-ch-ua-mobile: ?0' \
  -H 'sec-ch-ua-platform: "macOS"' \
  -H 'sec-fetch-dest: empty' \
  -H 'sec-fetch-mode: cors' \
  -H 'sec-fetch-site: cross-site' \
  -H 'user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36'

Thanks

P

Pawan Jain•7/2/24, 3:31 PM

@Jauhari

I could not reproduce the issue on latest version 0.24.0.

Could you please upgrade the self hosted version to 0.24.0 ?

S

Stelli•7/2/24, 3:41 PM

Hey, i already try to upgrade the self host to 0.24.0, and also found this issue.

S

Stelli•7/2/24, 3:43 PM

Here is the branch which are using 0.24.0 version :
https://github.com/yosiawan/novu-playground/tree/chore/novu-new-version-listen-different-feeds

S

Stelli•7/2/24, 3:43 PM

Here is the branch which are using 0.16.0 version :
https://github.com/yosiawan/novu-playground/tree/chore/novu-different-feeds

P

Pawan Jain•7/2/24, 3:45 PM

@Stelli

I think you misunderstood the version upgrade
https://github.com/yosiawan/novu-playground/blob/chore/novu-new-version-listen-different-feeds/package.json#L12

here, you updated

@novu/notification-center

@novu/notification-center

@novu/notification-center

@novu/notification-center to 0.24.0 version.

I meant to update your self hosted novu instance to 0.24.0

S

Stelli•7/2/24, 3:46 PM

i see

S

Stelli•7/2/24, 3:48 PM

let me try to talk to my team, and will update to you later. Thank you @Pawan Jain

S

Stelli•7/3/24, 9:05 AM

after trying to upgrade the novu self hosted instance in local to 0.24.0, the bug is still happening. Do you have any idea ? @Pawan Jain

S

Schyres•7/3/24, 9:43 AM

Hi @Pawan Jain, sorry to suddenly jump in, I managed to reproduce the issue consistently in the local machine.

I upgraded the novu server instance into v0.24.0 as instructed. However, the issue persist as long as i use the react sdk with version 0.16.1 and later.

I managed to narrow down that the root cause exists in the react SDK due to the request being sent. Everytime

useFetchNotifications

useFetchNotifications

useFetchNotifications

useFetchNotifications hook is being called, an HTTP request is sent to the novu API instance. Works perfectly in 0.15.0 and 0.16.0, however that the behavior doesn't work as expected in react SDK v0.16.1 and higher, it appears that it only send 1 request to the API instance. Screenshots are provided my arguments, ran using the exact same code and exact same server instance, only differs in the SDK version.

My hypothesis is that both function calls use some shared variable that either being locked by the first request or overwritten by the second request

S

Schyres•7/3/24, 9:45 AM

Here's the code that I use,

function Header() {
    return (
        <>
            <div className='bell'>
                <NovuProvider
                    subscriberId='test-user'
                    applicationIdentifier='TMzA0y68sGZG'
                    backendUrl='http://localhost:3000'
                    subscriberHash='c61c7477ee658ad190bd3aa88d35fa8e863562b4e181792ae8757e8b847d4f91'
                >
                    <Notification />
                </NovuProvider>
            </div>
        </>
    );
}

function Notification() {
    const { data: govmartNotifications } = useFetchNotifications({
        query: { feedIdentifier: "govmart", limit: 10 }
    });

    const { data: triggerNotifications } = useFetchNotifications({
        query: { feedIdentifier: "trigger", limit: 10 }
    });

    console.log(">> govmart", govmartNotifications)
    console.log(">> trigger", triggerNotifications)

    return (
        <>
            <h1>v0.24.2</h1>
            <PopoverNotificationCenter>
                {({ unseenCount }) => <NotificationBell unseenCount={unseenCount} />}
            </PopoverNotificationCenter>
        </>
    )
}

function Header() {
    return (
        <>
            <div className='bell'>
                <NovuProvider
                    subscriberId='test-user'
                    applicationIdentifier='TMzA0y68sGZG'
                    backendUrl='http://localhost:3000'
                    subscriberHash='c61c7477ee658ad190bd3aa88d35fa8e863562b4e181792ae8757e8b847d4f91'
                >
                    <Notification />
                </NovuProvider>
            </div>
        </>
    );
}

function Notification() {
    const { data: govmartNotifications } = useFetchNotifications({
        query: { feedIdentifier: "govmart", limit: 10 }
    });

    const { data: triggerNotifications } = useFetchNotifications({
        query: { feedIdentifier: "trigger", limit: 10 }
    });

    console.log(">> govmart", govmartNotifications)
    console.log(">> trigger", triggerNotifications)

    return (
        <>
            <h1>v0.24.2</h1>
            <PopoverNotificationCenter>
                {({ unseenCount }) => <NotificationBell unseenCount={unseenCount} />}
            </PopoverNotificationCenter>
        </>
    )
}

function Header() {
    return (
        <>
            <div className='bell'>
                <NovuProvider
                    subscriberId='test-user'
                    applicationIdentifier='TMzA0y68sGZG'
                    backendUrl='http://localhost:3000'
                    subscriberHash='c61c7477ee658ad190bd3aa88d35fa8e863562b4e181792ae8757e8b847d4f91'
                >
                    <Notification />
                </NovuProvider>
            </div>
        </>
    );
}

function Notification() {
    const { data: govmartNotifications } = useFetchNotifications({
        query: { feedIdentifier: "govmart", limit: 10 }
    });

    const { data: triggerNotifications } = useFetchNotifications({
        query: { feedIdentifier: "trigger", limit: 10 }
    });

    console.log(">> govmart", govmartNotifications)
    console.log(">> trigger", triggerNotifications)

    return (
        <>
            <h1>v0.24.2</h1>
            <PopoverNotificationCenter>
                {({ unseenCount }) => <NotificationBell unseenCount={unseenCount} />}
            </PopoverNotificationCenter>
        </>
    )
}

function Header() {
    return (
        <>
            <div className='bell'>
                <NovuProvider
                    subscriberId='test-user'
                    applicationIdentifier='TMzA0y68sGZG'
                    backendUrl='http://localhost:3000'
                    subscriberHash='c61c7477ee658ad190bd3aa88d35fa8e863562b4e181792ae8757e8b847d4f91'
                >
                    <Notification />
                </NovuProvider>
            </div>
        </>
    );
}

function Notification() {
    const { data: govmartNotifications } = useFetchNotifications({
        query: { feedIdentifier: "govmart", limit: 10 }
    });

    const { data: triggerNotifications } = useFetchNotifications({
        query: { feedIdentifier: "trigger", limit: 10 }
    });

    console.log(">> govmart", govmartNotifications)
    console.log(">> trigger", triggerNotifications)

    return (
        <>
            <h1>v0.24.2</h1>
            <PopoverNotificationCenter>
                {({ unseenCount }) => <NotificationBell unseenCount={unseenCount} />}
            </PopoverNotificationCenter>
        </>
    )
}

Is there anything I did wrong in the code?

S

Schyres•7/4/24, 12:26 PM

Hello @Support , would you mind checking on the issue? Thank you!

S

Stelli•7/10/24, 4:18 AM

hello @Pawan Jain , is there any update regarding this issue ?

N

Novu_Bot•7/10/24, 4:18 AM

@Stelli, you just advanced to level 1!

P

Pawan Jain•7/10/24, 6:27 AM

@Stelli @Schyres @Jauhari

Checkout this loom video
I can not reproduce this issue in 0.24.0 version

S

Stelli•7/10/24, 6:57 AM

hi @Pawan Jain , i have checked your video.
yes it works perfectly if we only used one feed to be called by useFetchNotification.

Have you tried to call two feed at the same page, so let say you call feed marketing and general together ?
When we try that ways somehow we only can retrieve one feed.

Thank you

P

Pawan Jain•7/10/24, 8:03 AM

@Stelli

I see it is not working if you use two feedIdentifiers in the same page or component.

Would you like to share your usecase how you are planning to use?

S

Stelli•7/10/24, 9:00 AM

So, basically we want to have 2 feeds.
The general feed and marketing feed.

the general feed is shown as a top level notification (it exists in the header of the app, aka in all pages)
the marketing feed exists only in marketing pages.
and both of the feeds contains different message, that's why we seperate into different feeds.

as if we have 2 streams of data being pushed into our client app
does novu supports this kind of use case at the moment? because we saw it was working on older versions but not the newer versions

S

Stelli•7/10/24, 9:00 AM

@Pawan Jain

P

Pawan Jain•7/10/24, 5:00 PM

@Stelli

Thanks for sharing.
Only way to handle this is to use different

<NovuProvider>

<NovuProvider>

<NovuProvider>

<NovuProvider> with different stores values in those different components

S

Stelli•7/11/24, 3:12 AM

But, in lower version (< 0.16.0), it works well if we want to call two feeds by using useFetchNotification.
is there possibility it will be provided again in newer version of novu ?

P

Pawan Jain•7/11/24, 5:24 AM

@Stelli
I will keep you updated. I can not confirm if new inbox will be supported in self hosted version

S

Stelli•7/12/24, 3:19 AM

Hi @Pawan Jain

FYI, i also try to use different <NovuProvider> with different stores values in one page.
But it also doesn't work (it only listen one feed instead of two feeds).

Here is the code :
https://github.com/yosiawan/novu-playground/tree/multiple-provider-on-novu-newer-version

GitHub

GitHub - yosiawan/novu-playground at multiple-provider-on-novu-newe...

Contribute to yosiawan/novu-playground development by creating an account on GitHub.