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

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
       }
     },

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) {

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})
+}

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])
 

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})

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, () => ({

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])
 

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}`))
         }
       },
     })

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`)

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`)
       }

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()
       }