From 3e5c85f9b87bc2dbc07f2dcfdb518683334816e8 Mon Sep 17 00:00:00 2001
From: Ryan Stelly <ryan@inaturalist.org>
Date: Tue, 28 Apr 2026 13:28:02 -0500
Subject: [PATCH] retrigger notification query on effect rather than new query
 (#3573)

* retrigger notification query on effect rather than new query

* move unviewedObs refetch to effect

* fix test

* Remove trailing whitespaces

---------

Co-authored-by: Johannes Klein <johannes.t.klein@gmail.com>
---
 src/components/Notifications/NotificationsTab.tsx     |  7 ++++---
 .../BottomTabNavigator/NotificationsIconContainer.tsx | 11 ++++++-----
 .../BottomTabNavigator/CustomTabBar.test.js           |  1 +
 3 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/src/components/Notifications/NotificationsTab.tsx b/src/components/Notifications/NotificationsTab.tsx
index 32ea36d42..58e4caac5 100644
--- a/src/components/Notifications/NotificationsTab.tsx
+++ b/src/components/Notifications/NotificationsTab.tsx
@@ -23,9 +23,6 @@ const NotificationsTab = ( { id, text }: TabComponentProps ) => {
     [
       "NotificationsTab",
       "notificationsCount",
-      // We want to check for notifications when the user views an
-      // observation, because that might make the indicator go away
-      observationMarkedAsViewedAt,
       id,
     ],
     ( optsWithAuth: ApiOpts ) => fetchUnviewedObservationUpdatesCount(
@@ -41,6 +38,10 @@ const NotificationsTab = ( { id, text }: TabComponentProps ) => {
     },
   );
 
+  useEffect( () => {
+    refetch();
+  }, [observationMarkedAsViewedAt, refetch] );
+
   useEffect( ( ) => {
     const listener = EventRegister.addEventListener(
       NOTIFICATIONS_REFRESHED,
diff --git a/src/navigation/BottomTabNavigator/NotificationsIconContainer.tsx b/src/navigation/BottomTabNavigator/NotificationsIconContainer.tsx
index 6ad6a753b..d601f62fd 100644
--- a/src/navigation/BottomTabNavigator/NotificationsIconContainer.tsx
+++ b/src/navigation/BottomTabNavigator/NotificationsIconContainer.tsx
@@ -1,6 +1,6 @@
 import { fetchUnviewedObservationUpdatesCount } from "api/observations";
 import NotificationsIcon from "navigation/BottomTabNavigator/NotificationsIcon";
-import React from "react";
+import React, { useEffect } from "react";
 import {
   useAuthenticatedQuery,
   useCurrentUser,
@@ -23,12 +23,9 @@ const NotificationsIconContainer = ( {
 
   // TODO: enable fields if it makes sense
   // https://linear.app/inaturalist/issue/MOB-1362/enable-fields-for-unviewed-updates-count-in-notificationsicon
-  const { data: unviewedUpdatesCount } = useAuthenticatedQuery(
+  const { data: unviewedUpdatesCount, refetch } = useAuthenticatedQuery(
     [
       "notificationsCount",
-      // We want to check for notifications when the user views an
-      // observation, because that might make the indicator go away
-      observationMarkedAsViewedAt,
     ],
     optsWithAuth => fetchUnviewedObservationUpdatesCount( {}, optsWithAuth ),
     {
@@ -39,6 +36,10 @@ const NotificationsIconContainer = ( {
     },
   );
 
+  useEffect( () => {
+    refetch();
+  }, [observationMarkedAsViewedAt, refetch] );
+
   const hasUnread = ( unviewedUpdatesCount ?? 0 ) > 0;
 
   return (
diff --git a/tests/unit/components/BottomTabNavigator/CustomTabBar.test.js b/tests/unit/components/BottomTabNavigator/CustomTabBar.test.js
index 3106b6050..24cf10676 100644
--- a/tests/unit/components/BottomTabNavigator/CustomTabBar.test.js
+++ b/tests/unit/components/BottomTabNavigator/CustomTabBar.test.js
@@ -27,6 +27,7 @@ jest.mock( "sharedHooks/useAuthenticatedQuery", () => ( {
   __esModule: true,
   default: () => ( {
     data: 0,
+    refetch: () => undefined,
   } ),
 } ) );