Laravel+React聊天应用429请求过多错误修复咨询

Root Cause #

Your useEffect hook includes notifications and unreadMessageCount as dependencies. When fetchNotificationMessages() calls setNotifications() or fetchUnreadMessageCount() calls setUnreadMessageCount(), these state variables update, triggering the useEffect to run again. This creates an infinite loop of API requests, hitting your server's rate limit and causing the 429 error.

Fix 1: Correct the useEffect Dependency Array #

Remove notifications and unreadMessageCount from the dependency list—they’re being updated by the effect itself, which causes the loop. Only keep session since it’s the valid trigger for initializing or refreshing data when the user session changes.

useEffect(() => {
    if (session?.id) { // Simplify existence check with optional chaining
        fetchUnreadMessageCount();
        fetchNotificationMessages();
        Storage.set('session', session);
    }
}, [session]); // Only session as dependency

Fix 2: Combine API Endpoints (Reduce Request Volume) #

Instead of two separate POST requests, create a single Laravel endpoint that returns both notification messages and unread count. This cuts request volume in half, lowering the chance of hitting rate limits.

Laravel Route & Controller Example:

// routes/api.php
Route::post('notifications-data', [NotificationController::class, 'getCombinedData']);

// app/Http/Controllers/NotificationController.php
public function getCombinedData(Request $request) {
    $userId = $request->user;
    $notifications = Notification::where('user_id', $userId)->latest()->get();
    $unreadCount = Notification::where('user_id', $userId)->where('read', false)->count();
    
    return response()->json([
        'notifications' => $notifications,
        'unread_count' => $unreadCount
    ]);
}

Updated React Code:

const fetchNotificationsData = () => {
    if (session?.id) {
        axios.post(Route.get('notifications-data'), { user: session.id })
            .then(response => {
                setNotifications(response.data.notifications.reverse());
                setUnreadMessageCount(response.data.unread_count);
            });
    }
};

useEffect(() => {
    if (session?.id) {
        fetchNotificationsData();
        Storage.set('session', session);
    }
}, [session]);

Fix 3: Add Controlled Periodic Refreshes #

If you need to refresh notifications at intervals (e.g., every 30 seconds), use setInterval with proper cleanup to avoid memory leaks and excessive requests.

useEffect(() => {
    if (!session?.id) return;

    // Initial load
    fetchNotificationsData();
    Storage.set('session', session);

    // Refresh every 30 seconds
    const intervalId = setInterval(fetchNotificationsData, 30000);

    // Cleanup interval when component unmounts or session changes
    return () => clearInterval(intervalId);
}, [session]);

Fix 4: Cancel Pending Requests #

Use Axios cancel tokens to abort incomplete requests if the session changes or a new refresh is triggered, preventing duplicate unnecessary calls.

const fetchNotificationsData = () => {
    if (!session?.id) return;

    const source = axios.CancelToken.source();

    axios.post(Route.get('notifications-data'), { user: session.id }, { cancelToken: source.token })
        .then(response => {
            setNotifications(response.data.notifications.reverse());
            setUnreadMessageCount(response.data.unread_count);
        })
        .catch(error => {
            if (axios.isCancel(error)) return; // Ignore canceled requests
        });

    return source;
};

useEffect(() => {
    let cancelSource;

    if (session?.id) {
        cancelSource = fetchNotificationsData();
        Storage.set('session', session);

        const intervalId = setInterval(() => {
            cancelSource?.cancel('Replacing with new request');
            cancelSource = fetchNotificationsData();
        }, 30000);

        return () => {
            clearInterval(intervalId);
            cancelSource?.cancel('Component unmounted');
        };
    }

    return () => cancelSource?.cancel('Session changed');
}, [session]);

Additional Recommendations #

• Adjust Laravel Rate Limits: Tweak rate limits in app/Providers/RouteServiceProvider.php if default restrictions are too strict for your chat app’s needs.
• Switch to WebSockets: For real-time notifications, use Laravel Echo with Pusher or Socket.IO. This eliminates polling entirely, providing instant updates without hitting rate limits.

内容的提问来源于stack exchange，提问作者Ümit Sarsıcı