N
Novu•7d ago
Jauhari

How to get a notifications list by feed on react app

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
No description
15 Replies
Novu_Bot
Novu_Bot•7d ago
@Jauhari, you just advanced to level 2!
Ask Inkeep
Ask Inkeep•7d ago
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. ----------------------------- 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 ----------------------------- 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: 1. 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 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>
2. Fetching notifications for different feeds: You're correct in using the 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 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" }
});
3. Using sockets for real-time updates: For real-time updates, you can use the useSocket hook provided by Novu (3) . Here's an example of how you might use it:
Ask Inkeep
Ask Inkeep•7d ago
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 (5) . 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
Jauhari
Jauhari•7d ago
solution 1 & 2 doenst work still gives me same result
No description
Ask Inkeep
Ask Inkeep•7d ago
Got it. Tagging @Support for additional help.
Pawan Jain
Pawan Jain•4d ago
@Jauhari Please make sure feedIdentifier value is correct
Jauhari
Jauhari•4d ago
it is correct
Pawan Jain
Pawan Jain•4d ago
@Jauhari go to network tab and copy the request as curl and paste it her (hide any sensitive info)
Jauhari
Jauhari•3d ago
please wait 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'
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'
Thanks
Pawan Jain
Pawan Jain•3d ago
@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 ?
Stelli
Stelli•3d ago
Hey, i already try to upgrade the self host to 0.24.0, and also found this issue. 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 Here is the branch which are using 0.16.0 version : https://github.com/yosiawan/novu-playground/tree/chore/novu-different-feeds
Pawan Jain
Pawan Jain•3d ago
@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 to 0.24.0 version. I meant to update your self hosted novu instance to 0.24.0
Stelli
Stelli•2d ago
i see let me try to talk to my team, and will update to you later. Thank you @Pawan Jain 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
Schyres
Schyres•2d ago
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 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
No description
No description
No description
Schyres
Schyres•6h ago
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>
        </>
    )
}
Is there anything I did wrong in the code? Hello @Support , would you mind checking on the issue? Thank you!
Want results from more Discord servers?
Add your server
More Posts
Issue with expo push notification provider. Error "Unexpected Provider Error"By @Marcos Vinicius ref:- https://discord.com/channels/895029566685462578/937309213036785744/12558How do delete Novu organization?By accident, I created a new Novu organization which puts me on the business plan. How can I delete Shadow PayloadHello ! I'm trying to use Novu with the java sdk and as self-hosted. Actually it work pretty well. How to create a TerminalHello Team! I spent a lot of time investigating where is coming from this bundle https://github.com🚨 Post Guidelines 🚨This forum channel is for **EVERYTHING**. Want to share something useful, funny, interesting, off-🚨 Support Guidelines 🚨- Share as many details as you can. It will help us in debugging the issue. - This channel is for geHi Team,Is there any way to Get Messages of a subscriber ordered by latest messages? If I send limit as 50 t"Online" means actively using the app?Hi, everyone! Does anyone know if being "online" means actively using the app? if I were to set up aSetting condition for user inactivityHi, Team! How do I add a condition for a push to be triggered after 3 days of a subscriber inactivitCORS on VPSI deployed Novu on VPS. When I try to register through web app I get CORS error. In network and con