Novu•6mo ago

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

25 Replies

Novu_Bot•6mo ago

@Jauhari, you just advanced to level 2!

Ask Inkeep•6mo 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•6mo 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

JauhariOP•6mo ago

solution 1 & 2 doenst work still gives me same result

Ask Inkeep•6mo ago

Got it. Tagging @Support for additional help.

Pawan Jain•6mo ago

@Jauhari Please make sure feedIdentifier value is correct

JauhariOP•6mo ago

it is correct

Pawan Jain•6mo ago

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

JauhariOP•6mo 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•6mo 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•6mo 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•6mo 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•6mo 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•6mo 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

Schyres•6mo 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!

Stelli•5mo ago

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

Novu_Bot•5mo ago

@Stelli, you just advanced to level 1!

Pawan Jain•5mo ago

@Stelli @Schyres @Jauhari Checkout this loom video I can not reproduce this issue in 0.24.0 version

Stelli•5mo ago

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

Pawan Jain•5mo ago

@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?

Stelli•5mo ago

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 @Pawan Jain

Pawan Jain•5mo ago

@Stelli Thanks for sharing. Only way to handle this is to use different <NovuProvider> with different stores values in those different components

Stelli•5mo ago

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 ?

Pawan Jain•5mo ago

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

Stelli•5mo ago

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.

Gaming

Programming

How to get a notifications list by feed on react app