skip to Main Content

I’m developing a chat application using Laravel and React. I want to create notifications for incoming messages. Notifications are coming but I’m getting too many request errors.

const fetchNotificationMessages = () => {
        if (session !== undefined && session.id !== undefined) {
            axios.post(Route.get('notifications'), {
                user: session.id
            }).then(response => {
                if (response.data.notification !== undefined) setNotifications(response.data.notification.reverse())
            })
        }
    };

    const fetchUnreadMessageCount = () => {
        if (session !== undefined && session.id !== undefined) {
            axios.post(Route.get('unread-message-count'), {
                user: session.id
            })
                .then(response => {
                    const count = response.data.count;
                    setUnreadMessageCount(count);
                });
        }
    };

    useEffect(() => {
        fetchUnreadMessageCount();
        fetchNotificationMessages();
        Storage.set('session', session);
    }, [session, notifications,unreadMessageCount]);
When I type fetchUnreadmessagecount and fetchNotificationMessage as useEffecte on the NotificationContext page, I get the too many requests error. Thanks in advance for your help.

2

Answers


  1. let’s take you are taking state variable as const [notifications, setNotifications] = useState()

    const [unreadMessageCount, setUnreadMessageCount] = useState(0)

    if it is like that you have to remove the dependency of notifications and unreadMessageCount from useEffect dependecy with that only it is causing too-many re renders
    please provide the proper information like when you want to fetch the notification
    alerts

    const fetchNotificationMessages = () => {
            if (session !== undefined && session.id !== undefined) {
                axios.post(Route.get('notifications'), {
                    user: session.id
                }).then(response => {
                    if (response.data.notification !== undefined) 
            setNotifications(response.data.notification.reverse())
                })
                }
            };
    
            const fetchUnreadMessageCount = () => {
            if (session !== undefined && session.id !== undefined) {
                axios.post(Route.get('unread-message-count'), {
                    user: session.id
                })
                    .then(response => {
                        const count = response.data.count;
                        setUnreadMessageCount(count);
                    });
            }
        };
    
        useEffect(() => {
            fetchUnreadMessageCount();
            fetchNotificationMessages();
            Storage.set('session', session);
        }, [session]);
    
    Login or Signup to reply.
  2. The best practice for this situation is to use web sockets to get real time notifications not fetching it all the time.

    if you are using Laravel 10 and later, you can use laravel reverb

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search