Maintain some feed data to avoid needless glimmers (#2054)

11 files changed, 40 insertions, 23 deletions

diff --git a/src/lib/notifications/notifications.ts b/src/lib/notifications/notifications.ts
index 9c499be08..6e79e6b91 100644
--- a/src/lib/notifications/notifications.ts
+++ b/src/lib/notifications/notifications.ts
@@ -5,6 +5,7 @@ import {devicePlatform, isIOS} from 'platform/detection'
 import {track} from 'lib/analytics/analytics'
 import {logger} from '#/logger'
 import {RQKEY as RQKEY_NOTIFS} from '#/state/queries/notifications/feed'
+import {truncateAndInvalidate} from '#/state/queries/util'
 import {listenSessionLoaded} from '#/state/events'
 
 const SERVICE_DID = (serviceUrl?: string) =>
@@ -83,7 +84,7 @@ export function init(queryClient: QueryClient) {
     )
     if (event.request.trigger.type === 'push') {
       // refresh notifications in the background
-      queryClient.resetQueries({queryKey: RQKEY_NOTIFS()})
+      truncateAndInvalidate(queryClient, RQKEY_NOTIFS())
       // handle payload-based deeplinks
       let payload
       if (isIOS) {
@@ -121,7 +122,7 @@ export function init(queryClient: QueryClient) {
           logger.DebugContext.notifications,
         )
         track('Notificatons:OpenApp')
-        queryClient.resetQueries({queryKey: RQKEY_NOTIFS()})
+        truncateAndInvalidate(queryClient, RQKEY_NOTIFS())
         resetToTab('NotificationsTab') // open notifications tab
       }
     },
diff --git a/src/state/queries/notifications/unread.tsx b/src/state/queries/notifications/unread.tsx
index e0510e79e..6c130aaea 100644
--- a/src/state/queries/notifications/unread.tsx
+++ b/src/state/queries/notifications/unread.tsx
@@ -14,6 +14,7 @@ import {isNative} from '#/platform/detection'
 import {useMutedThreads} from '#/state/muted-threads'
 import {RQKEY as RQKEY_NOTIFS} from './feed'
 import {logger} from '#/logger'
+import {truncateAndInvalidate} from '../util'
 
 const UPDATE_INTERVAL = 30 * 1e3 // 30sec
 
@@ -126,7 +127,7 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
           // update & broadcast
           setNumUnread(unreadCountStr)
           if (invalidate) {
-            queryClient.resetQueries({queryKey: RQKEY_NOTIFS()})
+            truncateAndInvalidate(queryClient, RQKEY_NOTIFS())
           }
           broadcast.postMessage({event: unreadCountStr})
         } catch (e) {
diff --git a/src/state/queries/util.ts b/src/state/queries/util.ts
new file mode 100644
index 000000000..0b3eefea2
--- /dev/null
+++ b/src/state/queries/util.ts
@@ -0,0 +1,17 @@
+import {QueryClient, QueryKey, InfiniteData} from '@tanstack/react-query'
+
+export function truncateAndInvalidate<T = any>(
+  queryClient: QueryClient,
+  querykey: QueryKey,
+) {
+  queryClient.setQueryData<InfiniteData<T>>(querykey, data => {
+    if (data) {
+      return {
+        pageParams: data.pageParams.slice(0, 1),
+        pages: data.pages.slice(0, 1),
+      }
+    }
+    return data
+  })
+  queryClient.invalidateQueries({queryKey: querykey})
+}
diff --git a/src/view/com/feeds/FeedPage.tsx b/src/view/com/feeds/FeedPage.tsx
index 1a32d29c8..f06716fb0 100644
--- a/src/view/com/feeds/FeedPage.tsx
+++ b/src/view/com/feeds/FeedPage.tsx
@@ -23,6 +23,7 @@ import {useLingui} from '@lingui/react'
 import {useSession} from '#/state/session'
 import {useComposerControls} from '#/state/shell/composer'
 import {listenSoftReset, emitSoftReset} from '#/state/events'
+import {truncateAndInvalidate} from '#/state/queries/util'
 
 const POLL_FREQ = 30e3 // 30sec
 
@@ -62,7 +63,7 @@ export function FeedPage({
   const onSoftReset = React.useCallback(() => {
     if (isPageFocused) {
       scrollToTop()
-      queryClient.resetQueries({queryKey: FEED_RQKEY(feed)})
+      truncateAndInvalidate(queryClient, FEED_RQKEY(feed))
       setHasNew(false)
     }
   }, [isPageFocused, scrollToTop, queryClient, feed, setHasNew])
@@ -83,7 +84,7 @@ export function FeedPage({
 
   const onPressLoadLatest = React.useCallback(() => {
     scrollToTop()
-    queryClient.resetQueries({queryKey: FEED_RQKEY(feed)})
+    truncateAndInvalidate(queryClient, FEED_RQKEY(feed))
     setHasNew(false)
   }, [scrollToTop, feed, queryClient, setHasNew])
 
diff --git a/src/view/screens/Notifications.tsx b/src/view/screens/Notifications.tsx
index 0f442038b..3ce1128a6 100644
--- a/src/view/screens/Notifications.tsx
+++ b/src/view/screens/Notifications.tsx
@@ -25,6 +25,7 @@ import {
 } from '#/state/queries/notifications/unread'
 import {RQKEY as NOTIFS_RQKEY} from '#/state/queries/notifications/feed'
 import {listenSoftReset, emitSoftReset} from '#/state/events'
+import {truncateAndInvalidate} from '#/state/queries/util'
 
 type Props = NativeStackScreenProps<
   NotificationsTabNavigatorParams,
@@ -54,9 +55,7 @@ export function NotificationsScreen({}: Props) {
     scrollToTop()
     if (hasNew) {
       // render what we have now
-      queryClient.resetQueries({
-        queryKey: NOTIFS_RQKEY(),
-      })
+      truncateAndInvalidate(queryClient, NOTIFS_RQKEY())
     } else {
       // check with the server
       unreadApi.checkUnread({invalidate: true})
diff --git a/src/view/screens/Profile.tsx b/src/view/screens/Profile.tsx
index 8b4107ac4..d5e378ccb 100644
--- a/src/view/screens/Profile.tsx
+++ b/src/view/screens/Profile.tsx
@@ -35,6 +35,7 @@ import {LoadLatestBtn} from '../com/util/load-latest/LoadLatestBtn'
 import {useQueryClient} from '@tanstack/react-query'
 import {useComposerControls} from '#/state/shell/composer'
 import {listenSoftReset} from '#/state/events'
+import {truncateAndInvalidate} from '#/state/queries/util'
 
 interface SectionRef {
   scrollToTop: () => void
@@ -404,7 +405,7 @@ const FeedSection = React.forwardRef<SectionRef, FeedSectionProps>(
 
     const onScrollToTop = React.useCallback(() => {
       scrollElRef.current?.scrollToOffset({offset: -headerHeight})
-      queryClient.resetQueries({queryKey: FEED_RQKEY(feed)})
+      truncateAndInvalidate(queryClient, FEED_RQKEY(feed))
       setHasNew(false)
     }, [scrollElRef, headerHeight, queryClient, feed, setHasNew])
     React.useImperativeHandle(ref, () => ({
diff --git a/src/view/screens/ProfileFeed.tsx b/src/view/screens/ProfileFeed.tsx
index e38543e6b..659560a25 100644
--- a/src/view/screens/ProfileFeed.tsx
+++ b/src/view/screens/ProfileFeed.tsx
@@ -64,6 +64,7 @@ import {
 import {useSession} from '#/state/session'
 import {useLikeMutation, useUnlikeMutation} from '#/state/queries/like'
 import {useComposerControls} from '#/state/shell/composer'
+import {truncateAndInvalidate} from '#/state/queries/util'
 
 const SECTION_TITLES = ['Posts', 'About']
 
@@ -502,7 +503,7 @@ const FeedSection = React.forwardRef<SectionRef, FeedSectionProps>(
 
     const onScrollToTop = useCallback(() => {
       scrollElRef.current?.scrollToOffset({offset: -headerHeight})
-      queryClient.resetQueries({queryKey: FEED_RQKEY(feed)})
+      truncateAndInvalidate(queryClient, FEED_RQKEY(feed))
       setHasNew(false)
     }, [scrollElRef, headerHeight, queryClient, feed, setHasNew])
 
diff --git a/src/view/screens/ProfileList.tsx b/src/view/screens/ProfileList.tsx
index ee0cdce29..1396b8269 100644
--- a/src/view/screens/ProfileList.tsx
+++ b/src/view/screens/ProfileList.tsx
@@ -55,6 +55,7 @@ import {cleanError} from '#/lib/strings/errors'
 import {useSession} from '#/state/session'
 import {useComposerControls} from '#/state/shell/composer'
 import {isWeb} from '#/platform/detection'
+import {truncateAndInvalidate} from '#/state/queries/util'
 
 const SECTION_TITLES_CURATE = ['Posts', 'About']
 const SECTION_TITLES_MOD = ['About']
@@ -128,10 +129,8 @@ function ProfileListScreenLoaded({
       list,
       onChange() {
         if (isCurateList) {
-          queryClient.resetQueries({
-            // TODO(eric) should construct these strings with a fn too
-            queryKey: FEED_RQKEY(`list|${list.uri}`),
-          })
+          // TODO(eric) should construct these strings with a fn too
+          truncateAndInvalidate(queryClient, FEED_RQKEY(`list|${list.uri}`))
         }
       },
     })
diff --git a/src/view/shell/Drawer.tsx b/src/view/shell/Drawer.tsx
index b4710c2e1..459a021c4 100644
--- a/src/view/shell/Drawer.tsx
+++ b/src/view/shell/Drawer.tsx
@@ -53,6 +53,7 @@ import {emitSoftReset} from '#/state/events'
 import {useInviteCodesQuery} from '#/state/queries/invites'
 import {RQKEY as NOTIFS_RQKEY} from '#/state/queries/notifications/feed'
 import {NavSignupCard} from '#/view/shell/NavSignupCard'
+import {truncateAndInvalidate} from '#/state/queries/util'
 
 export function DrawerProfileCard({
   account,
@@ -141,9 +142,7 @@ export function DrawerContent() {
         } else {
           if (tab === 'Notifications') {
             // fetch new notifs on view
-            queryClient.resetQueries({
-              queryKey: NOTIFS_RQKEY(),
-            })
+            truncateAndInvalidate(queryClient, NOTIFS_RQKEY())
           }
           // @ts-ignore must be Home, Search, Notifications, or MyProfile
           navigation.navigate(`${tab}Tab`)
diff --git a/src/view/shell/bottom-bar/BottomBar.tsx b/src/view/shell/bottom-bar/BottomBar.tsx
index a97ff8afc..746b4d123 100644
--- a/src/view/shell/bottom-bar/BottomBar.tsx
+++ b/src/view/shell/bottom-bar/BottomBar.tsx
@@ -32,6 +32,7 @@ import {emitSoftReset} from '#/state/events'
 import {useSession} from '#/state/session'
 import {useProfileQuery} from '#/state/queries/profile'
 import {RQKEY as NOTIFS_RQKEY} from '#/state/queries/notifications/feed'
+import {truncateAndInvalidate} from '#/state/queries/util'
 
 type TabOptions = 'Home' | 'Search' | 'Notifications' | 'MyProfile' | 'Feeds'
 
@@ -62,9 +63,7 @@ export function BottomBar({navigation}: BottomTabBarProps) {
       } else {
         if (tab === 'Notifications') {
           // fetch new notifs on view
-          queryClient.resetQueries({
-            queryKey: NOTIFS_RQKEY(),
-          })
+          truncateAndInvalidate(queryClient, NOTIFS_RQKEY())
         }
         navigation.navigate(`${tab}Tab`)
       }
diff --git a/src/view/shell/desktop/LeftNav.tsx b/src/view/shell/desktop/LeftNav.tsx
index 8daa381d5..2ed294501 100644
--- a/src/view/shell/desktop/LeftNav.tsx
+++ b/src/view/shell/desktop/LeftNav.tsx
@@ -48,6 +48,7 @@ import {emitSoftReset} from '#/state/events'
 import {useQueryClient} from '@tanstack/react-query'
 import {RQKEY as NOTIFS_RQKEY} from '#/state/queries/notifications/feed'
 import {NavSignupCard} from '#/view/shell/NavSignupCard'
+import {truncateAndInvalidate} from '#/state/queries/util'
 
 function ProfileCard() {
   const {currentAccount} = useSession()
@@ -150,9 +151,7 @@ function NavItem({count, href, icon, iconFilled, label}: NavItemProps) {
       } else {
         if (href === '/notifications') {
           // fetch new notifs on view
-          queryClient.resetQueries({
-            queryKey: NOTIFS_RQKEY(),
-          })
+          truncateAndInvalidate(queryClient, NOTIFS_RQKEY())
         }
         onPress()
       }