@planningcenter/chat-react-native 4.2.1-qa-staging.2 → 4.2.1-qa-staging.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/chat-react-native",
-  "version": "4.2.1-qa-staging.2",
+  "version": "4.2.1-qa-staging.3",
   "description": "",
   "repository": {
     "type": "git",
@@ -33,7 +33,7 @@
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^7.2.0",
     "@fortawesome/react-native-fontawesome": "^0.3.2",
-    "@planningcenter/emoji-keyboard": "4.2.1-qa-staging.2",
+    "@planningcenter/emoji-keyboard": "4.2.1-qa-staging.3",
     "lodash-inflection": "^1.5.0"
   },
   "peerDependencies": {
@@ -84,5 +84,5 @@
     "sf-symbols-typescript": "^2.2.0",
     "typescript": "~6.0.3"
   },
-  "gitHead": "c5e62783ef9da7bf5ecbae701318df69b9686608"
+  "gitHead": "5a997b1865ce5d2f022cbd294812ef27726ad8b2"
 }

package/src/__tests__/hooks/use_conversation_messages.test.ts

@@ -0,0 +1,22 @@
+import { anchoredRetry } from '../../hooks/use_conversation_messages'
+import { FailedResponse } from '../../types/api_primitives'
+import { ResponseError } from '../../utils/response_error'
+
+const responseError = (status: number) =>
+  new ResponseError({ status, statusText: 'nope' } as unknown as FailedResponse)
+
+describe('anchoredRetry', () => {
+  it('gives up straight away on a missing anchor', () => {
+    expect(anchoredRetry(0, responseError(404))).toBe(false)
+  })
+
+  it('does not hammer a rate limit', () => {
+    expect(anchoredRetry(0, responseError(429))).toBe(false)
+  })
+
+  it('retries other failures a few times', () => {
+    expect(anchoredRetry(0, responseError(500))).toBe(true)
+    expect(anchoredRetry(2, new Error('network'))).toBe(true)
+    expect(anchoredRetry(3, responseError(500))).toBe(false)
+  })
+})

package/src/__tests__/hooks/use_conversation_messages_jolt_events.test.ts

@@ -1,36 +1,33 @@
-import {
-  queryKeysForEvent,
-  resolveMessageCaches,
-} from '../../hooks/use_conversation_messages_jolt_events'
+import { queryKeysForEvent } from '../../hooks/use_conversation_messages_jolt_events'
 
-const main = ['main']
-const threaded = ['threaded']
+const cache = { queryKey: ['shown'] }
+const gated = { queryKey: ['shown'], canUpdate: (e: string) => e !== 'message.created' }
+const topLevel = { sort_key: '01M', reply_root_id: null }
+const replyInThread = { sort_key: '01R', reply_root_id: '01ROOT' }
+const replyElsewhere = { sort_key: '01S', reply_root_id: '01OTHER' }
+const theRoot = { sort_key: '01ROOT', reply_root_id: '01ROOT' }
 
-describe('resolveMessageCaches', () => {
-  it('lets an override replace the default entry for the same key', () => {
-    const gate = { queryKey: ['main'], canUpdate: () => false }
-
-    expect(resolveMessageCaches([main, threaded], [gate])).toEqual([gate, { queryKey: threaded }])
-  })
-
-  it('appends caches that are not among the defaults', () => {
-    const extra = { queryKey: ['anchored'] }
+describe('queryKeysForEvent', () => {
+  it('writes every message event to the conversation view', () => {
+    const view = { replyRootId: null, cache }
 
-    expect(resolveMessageCaches([main], [extra])).toEqual([{ queryKey: main }, extra])
+    expect(queryKeysForEvent('message.created', view, topLevel)).toEqual([['shown']])
+    expect(queryKeysForEvent('message.created', view, replyInThread)).toEqual([['shown']])
   })
-})
 
-describe('queryKeysForEvent', () => {
-  const noInserts = { queryKey: ['anchored'], canUpdate: (e: string) => e !== 'message.created' }
+  it('writes only this thread and its root to a reply view', () => {
+    const view = { replyRootId: '01ROOT', cache }
 
-  it('returns every cache that accepts the event', () => {
-    expect(queryKeysForEvent('message.updated', [main], [noInserts])).toEqual([main, ['anchored']])
+    expect(queryKeysForEvent('message.created', view, replyInThread)).toEqual([['shown']])
+    expect(queryKeysForEvent('message.updated', view, theRoot)).toEqual([['shown']])
+    expect(queryKeysForEvent('message.created', view, topLevel)).toEqual([])
+    expect(queryKeysForEvent('message.created', view, replyElsewhere)).toEqual([])
   })
 
-  it('skips caches whose predicate rejects the event, including a gated default', () => {
-    const gatedMain = { queryKey: ['main'], canUpdate: (e: string) => e !== 'message.created' }
+  it('honors the gate on the shown cache', () => {
+    const view = { replyRootId: null, cache: gated }
 
-    expect(queryKeysForEvent('message.created', [main], [noInserts])).toEqual([main])
-    expect(queryKeysForEvent('message.created', [main, threaded], [gatedMain])).toEqual([threaded])
+    expect(queryKeysForEvent('message.created', view, topLevel)).toEqual([])
+    expect(queryKeysForEvent('reaction', view, topLevel)).toEqual([['shown']])
   })
 })

package/src/components/conversation/message_form.tsx

@@ -229,8 +229,6 @@ function MessageFormRoot({
   const handleSubmit = () => {
     if (!canSubmit) return
 
-    onBeforeSubmit?.()
-
     if (canGiphy && usingGiphy) {
       TextInput.State.blurTextInput(TextInput.State.currentlyFocusedInput())
       Haptic.impactLight()
@@ -252,6 +250,7 @@ function MessageFormRoot({
         mutateAsync({ text: messageText })
         reset()
       } else {
+        onBeforeSubmit?.()
         mutateAsync({ text: messageText, attachments: attachmentsForSubmit })
         reset()
       }

package/src/contexts/conversation_context.tsx

@@ -3,29 +3,34 @@ import React, { createContext, PropsWithChildren, useContext, useMemo } from 're
 interface ConversationContextValue {
   conversationId: number
   currentPageReplyRootId: string | null
+  messagesQueryKey: unknown[] | null
 }
 
 interface ConversationContextProviderProps extends PropsWithChildren {
   conversationId: number
   currentPageReplyRootId: string | null
+  messagesQueryKey?: unknown[] | null
 }
 
 const ConversationContext = createContext<ConversationContextValue>({
   conversationId: 0,
   currentPageReplyRootId: null,
+  messagesQueryKey: null,
 })
 
 export const ConversationContextProvider = ({
   children,
   conversationId,
   currentPageReplyRootId,
+  messagesQueryKey = null,
 }: ConversationContextProviderProps) => {
   const value = useMemo(
     () => ({
       conversationId,
       currentPageReplyRootId,
+      messagesQueryKey,
     }),
-    [conversationId, currentPageReplyRootId]
+    [conversationId, currentPageReplyRootId, messagesQueryKey]
   )
 
   return <ConversationContext.Provider value={value}>{children}</ConversationContext.Provider>

package/src/hooks/__tests__/use_fetch_newer_messages.test.tsx

@@ -0,0 +1,68 @@
+import { InfiniteData, QueryClientProvider } from '@tanstack/react-query'
+import { act, renderHook } from '@testing-library/react-native'
+import React from 'react'
+import { buildTestQueryClient } from '../../__utils__/query_client'
+import type { ApiCollection, MessageResource } from '../../types'
+import { getMessagesQueryKey } from '../../utils/request/get_messages'
+import { ApiClient, useApiClient } from '../use_api_client'
+import { useFetchNewerMessages } from '../use_fetch_newer_messages'
+
+jest.mock('../use_api_client')
+
+type QueryData = InfiniteData<ApiCollection<MessageResource>>
+
+const page = (ids: string[], next?: { idGt: string }) => ({
+  data: ids.map(id => ({ id, type: 'Message' }) as unknown as MessageResource),
+  links: {},
+  meta: { count: ids.length, totalCount: ids.length, next },
+})
+
+const queryKey = getMessagesQueryKey({ conversation_id: 1 })
+let queryClient = buildTestQueryClient()
+const get = jest.fn()
+
+const wrapper = ({ children }: { children: React.ReactNode }) => (
+  <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+)
+
+const cachedIds = () =>
+  queryClient.getQueryData<QueryData>(queryKey)?.pages.flatMap(p => p.data.map(m => m.id))
+
+beforeEach(() => {
+  queryClient = buildTestQueryClient()
+  queryClient.setQueryData<QueryData>(queryKey, {
+    pages: [page(['01C', '01B']), page(['01A'])],
+    pageParams: [{}, { where: { id_lt: '01B' } }],
+  })
+  get.mockReset()
+  ;(useApiClient as jest.MockedFunction<typeof useApiClient>).mockReturnValue({
+    chat: { get },
+  } as unknown as ApiClient)
+})
+
+describe('useFetchNewerMessages', () => {
+  it('follows meta.next until everything newer is in the cache', async () => {
+    get
+      .mockResolvedValueOnce(page(['01D', '01E'], { idGt: '01E' }))
+      .mockResolvedValueOnce(page(['01F']))
+    const { result } = renderHook(() => useFetchNewerMessages({ conversation_id: 1, queryKey }), {
+      wrapper,
+    })
+
+    await act(() => result.current('01C'))
+
+    expect(get).toHaveBeenCalledTimes(2)
+    expect(get.mock.calls[1][0].data.where).toEqual({ id_gt: '01E' })
+    expect(cachedIds()).toEqual(['01D', '01E', '01F', '01C', '01B', '01A'])
+  })
+
+  it('rejects when the request fails so the caller can try again later', async () => {
+    get.mockRejectedValueOnce(new Error('offline'))
+    const { result } = renderHook(() => useFetchNewerMessages({ conversation_id: 1, queryKey }), {
+      wrapper,
+    })
+
+    await expect(act(() => result.current('01C'))).rejects.toThrow('offline')
+    expect(cachedIds()).toEqual(['01C', '01B', '01A'])
+  })
+})

package/src/hooks/__tests__/use_held_back_messages.test.tsx

@@ -0,0 +1,60 @@
+import { act, renderHook } from '@testing-library/react-native'
+import { useHeldBackMessages } from '../use_held_back_messages'
+
+type Props = { newestMessageId?: string; readingHistory: boolean; caughtUp: boolean }
+
+const setup = (fetchNewer: jest.Mock, initial: Props) =>
+  renderHook((props: Props) => useHeldBackMessages({ fetchNewer, ...props }), {
+    initialProps: initial,
+  })
+
+describe('useHeldBackMessages', () => {
+  it('catches up from where the first skip happened, not from the newest message', async () => {
+    const fetchNewer = jest.fn().mockResolvedValue(undefined)
+    const { result, rerender } = setup(fetchNewer, {
+      newestMessageId: 'A',
+      readingHistory: true,
+      caughtUp: true,
+    })
+
+    act(() => result.current.onSkippedNewMessage())
+    rerender({ newestMessageId: 'B', readingHistory: true, caughtUp: true })
+    await act(async () => rerender({ newestMessageId: 'B', readingHistory: false, caughtUp: true }))
+
+    expect(fetchNewer).toHaveBeenCalledTimes(1)
+    expect(fetchNewer).toHaveBeenCalledWith('A')
+  })
+
+  it('keeps the cursor when the catch-up fails and tries again next time', async () => {
+    const fetchNewer = jest
+      .fn()
+      .mockRejectedValueOnce(new Error('offline'))
+      .mockResolvedValue(undefined)
+    const { result, rerender } = setup(fetchNewer, {
+      newestMessageId: 'A',
+      readingHistory: true,
+      caughtUp: true,
+    })
+
+    act(() => result.current.onSkippedNewMessage())
+    await act(async () => rerender({ newestMessageId: 'A', readingHistory: false, caughtUp: true }))
+    rerender({ newestMessageId: 'C', readingHistory: true, caughtUp: true })
+    await act(async () => rerender({ newestMessageId: 'C', readingHistory: false, caughtUp: true }))
+
+    expect(fetchNewer).toHaveBeenCalledTimes(2)
+    expect(fetchNewer).toHaveBeenLastCalledWith('A')
+  })
+
+  it('does nothing when nothing was held back', async () => {
+    const fetchNewer = jest.fn()
+    const { rerender } = setup(fetchNewer, {
+      newestMessageId: 'A',
+      readingHistory: true,
+      caughtUp: true,
+    })
+
+    await act(async () => rerender({ newestMessageId: 'A', readingHistory: false, caughtUp: true }))
+
+    expect(fetchNewer).not.toHaveBeenCalled()
+  })
+})

package/src/hooks/__tests__/use_message_reaction_toggle.test.tsx

@@ -0,0 +1,73 @@
+import { InfiniteData, QueryClientProvider } from '@tanstack/react-query'
+import { act, renderHook } from '@testing-library/react-native'
+import React from 'react'
+import { buildTestQueryClient } from '../../__utils__/query_client'
+import { ConversationContextProvider } from '../../contexts/conversation_context'
+import type { ApiCollection, MessageResource } from '../../types'
+import { getMessagesQueryKey } from '../../utils/request/get_messages'
+import { ApiClient, useApiClient } from '../use_api_client'
+import { useMessageReactionToggle } from '../use_message_reaction_toggle'
+
+jest.mock('../use_api_client')
+
+type QueryData = InfiniteData<ApiCollection<MessageResource>>
+
+const message = { id: '01M', type: 'Message', reactionCounts: [] } as unknown as MessageResource
+const liveKey = getMessagesQueryKey({ conversation_id: 1 })
+const anchoredKey = getMessagesQueryKey({ conversation_id: 1, anchor: '01A' })
+const seed = (): QueryData => ({
+  pages: [{ data: [message], links: {}, meta: { count: 1, totalCount: 1 } }],
+  pageParams: [{}],
+})
+
+const heartsIn = (queryClient: ReturnType<typeof buildTestQueryClient>, key: unknown[]) =>
+  queryClient
+    .getQueryData<QueryData>(key)
+    ?.pages[0].data[0].reactionCounts.map(r => `${r.value}:${r.count}`)
+
+describe('useMessageReactionToggle', () => {
+  beforeEach(() => {
+    ;(useApiClient as jest.MockedFunction<typeof useApiClient>).mockReturnValue({
+      chat: { post: jest.fn(() => new Promise(() => {})) },
+    } as unknown as ApiClient)
+  })
+
+  it('applies the optimistic reaction to the cache the screen is showing', async () => {
+    const queryClient = buildTestQueryClient({ defaultOptions: { queries: { gcTime: Infinity } } })
+    queryClient.setQueryData<QueryData>(anchoredKey, seed())
+    const wrapper = ({ children }: { children: React.ReactNode }) => (
+      <QueryClientProvider client={queryClient}>
+        <ConversationContextProvider
+          conversationId={1}
+          currentPageReplyRootId={null}
+          messagesQueryKey={anchoredKey}
+        >
+          {children}
+        </ConversationContextProvider>
+      </QueryClientProvider>
+    )
+    const { result } = renderHook(() => useMessageReactionToggle({ conversation_id: 1, message }), {
+      wrapper,
+    })
+
+    await act(async () => result.current.handleReactionToggle({ value: 'heart', mine: false }))
+
+    expect(heartsIn(queryClient, anchoredKey)).toEqual(['heart:1'])
+    expect(queryClient.getQueryData(liveKey)).toBeUndefined()
+  })
+
+  it('falls back to the live cache when no screen key is provided', async () => {
+    const queryClient = buildTestQueryClient({ defaultOptions: { queries: { gcTime: Infinity } } })
+    queryClient.setQueryData<QueryData>(liveKey, seed())
+    const wrapper = ({ children }: { children: React.ReactNode }) => (
+      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+    )
+    const { result } = renderHook(() => useMessageReactionToggle({ conversation_id: 1, message }), {
+      wrapper,
+    })
+
+    await act(async () => result.current.handleReactionToggle({ value: 'heart', mine: false }))
+
+    expect(heartsIn(queryClient, liveKey)).toEqual(['heart:1'])
+  })
+})

package/src/hooks/use_conversation_message_lookup.ts

@@ -0,0 +1,29 @@
+import { useQueryClient } from '@tanstack/react-query'
+import { useCallback, useSyncExternalStore } from 'react'
+import { findMessageInCaches } from '../utils/cache/find_message_in_caches'
+import { useConversationMessage } from './use_conversation_message'
+
+type Options = {
+  conversation_id: number
+  message_id: string
+}
+
+export const useConversationMessageLookup = ({ conversation_id, message_id }: Options) => {
+  const queryClient = useQueryClient()
+  const subscribe = useCallback(
+    (onChange: () => void) => queryClient.getQueryCache().subscribe(onChange),
+    [queryClient]
+  )
+  const getSnapshot = useCallback(
+    () => findMessageInCaches(queryClient, conversation_id, message_id),
+    [conversation_id, message_id, queryClient]
+  )
+  const cached = useSyncExternalStore(subscribe, getSnapshot)
+  const fetched = useConversationMessage({
+    conversation_id,
+    messageId: message_id,
+    enabled: !cached,
+  })
+
+  return cached ?? fetched.message
+}

package/src/hooks/use_conversation_messages.ts

@@ -2,6 +2,7 @@ import { useMemo } from 'react'
 import { MessageResource } from '../types'
 import { replaceEqualById } from '../utils/replace_equal_by_id'
 import { getMessagesQueryKey, getMessagesRequestArgs } from '../utils/request/get_messages'
+import { ResponseError } from '../utils/response_error'
 import { getNewerPageParam } from './paginator_meta'
 import { SuspensePaginatorOptions, useSuspensePaginator } from './use_suspense_api'
 
@@ -11,6 +12,13 @@ type Options = {
   anchor?: string | null
 }
 
+export const anchoredRetry = (failureCount: number, error: unknown) => {
+  const status = error instanceof ResponseError ? error.status : undefined
+  if (status === 404 || status === 429) return false
+
+  return failureCount < 3
+}
+
 export const useConversationMessages = (
   { conversation_id, reply_root_id, anchor }: Options,
   opts?: SuspensePaginatorOptions
@@ -33,6 +41,7 @@ export const useConversationMessages = (
             getPreviousPageParam: (page, _pages, pageParam) => getNewerPageParam(page, pageParam),
             gcTime: 0,
             staleTime: Infinity,
+            retry: anchoredRetry,
           }
         : {}),
       ...opts,

package/src/hooks/use_conversation_messages_jolt_events.ts

@@ -1,4 +1,4 @@
-import { hashKey, InfiniteData, useQueryClient } from '@tanstack/react-query'
+import { InfiniteData, useQueryClient } from '@tanstack/react-query'
 import { ApiCollection, MessageResource } from '../types'
 import { JoltReactionEvent, JoltTypingEvent } from '../types/jolt_events'
 import {
@@ -12,16 +12,14 @@ import {
   updateCacheWithIndividualMessage,
   updateCacheWithReaction,
   updateCacheReplyRoots,
-  getThreadedMessagesQueryKey,
 } from '../utils/cache/messages_cache'
 import { transformMessageEventDataToMessageResource } from '../utils/jolt/transform_message_event_data_to_message_resource'
 import { completeMessageCreationTracking } from '../utils/performance_tracking'
 import { getMessageQueryKey } from '../utils/request/get_message'
-import { getMessagesRequestArgs } from '../utils/request/get_messages'
+import { getMessagesQueryKey } from '../utils/request/get_messages'
 import { useApiClient } from './use_api_client'
 import { useCurrentPerson } from './use_current_person'
 import { useJoltChannel, useJoltEvent } from './use_jolt'
-import { getRequestQueryKey } from './use_suspense_api'
 import { TYPING_TIMEOUT_INTERVAL, useTypingStatusCache } from './use_typing_status_cache'
 
 export type MessagesJoltEvent =
@@ -35,38 +33,48 @@ export interface MessagesCache {
   canUpdate?: (event: MessagesJoltEvent) => boolean
 }
 
+export interface MessagesView {
+  replyRootId: string | null
+  cache: MessagesCache
+}
+
+type MessageEventData = { sort_key: string; reply_root_id?: string | null }
+
 interface Props {
   conversationId: number
-  messageCaches?: MessagesCache[]
+  replyRootId?: string | null
+  messageCache?: MessagesCache
 }
 
-export const resolveMessageCaches = (defaults: unknown[][], overrides: MessagesCache[]) => {
-  const overrideByHash = new Map(overrides.map(cache => [hashKey(cache.queryKey), cache]))
-  const defaultHashes = new Set(defaults.map(hashKey))
-  const resolved = defaults.map(queryKey => overrideByHash.get(hashKey(queryKey)) ?? { queryKey })
-  const extras = overrides.filter(cache => !defaultHashes.has(hashKey(cache.queryKey)))
-  return [...resolved, ...extras]
-}
+const belongsToView = (replyRootId: string | null, data: MessageEventData) =>
+  replyRootId === null || data.reply_root_id === replyRootId || data.sort_key === replyRootId
 
 export const queryKeysForEvent = (
   event: MessagesJoltEvent,
-  defaults: unknown[][],
-  overrides: MessagesCache[]
-) =>
-  resolveMessageCaches(defaults, overrides)
-    .filter(cache => !cache.canUpdate || cache.canUpdate(event))
-    .map(cache => cache.queryKey)
-
-export function useConversationMessagesJoltEvents({ conversationId, messageCaches = [] }: Props) {
+  view: MessagesView,
+  data: MessageEventData
+) => {
+  const accepted = !view.cache.canUpdate || view.cache.canUpdate(event)
+  return belongsToView(view.replyRootId, data) && accepted ? [view.cache.queryKey] : []
+}
+
+export function useConversationMessagesJoltEvents({
+  conversationId,
+  replyRootId = null,
+  messageCache,
+}: Props) {
   const queryClient = useQueryClient()
   const currentPerson = useCurrentPerson()
   const joltChannel = useJoltChannel(`chat.conversations.${conversationId}`)
-  const messagesRequestArgs = getMessagesRequestArgs({ conversation_id: conversationId })
-  const messagesQueryKey = getRequestQueryKey(messagesRequestArgs)
-  const cachesTouchedBy = (replyRootId?: string | null): unknown[][] =>
-    replyRootId
-      ? [messagesQueryKey, getThreadedMessagesQueryKey(conversationId, replyRootId)]
-      : [messagesQueryKey]
+  const view: MessagesView = {
+    replyRootId,
+    cache: messageCache ?? {
+      queryKey: getMessagesQueryKey({
+        conversation_id: conversationId,
+        reply_root_id: replyRootId,
+      }),
+    },
+  }
   const apiClient = useApiClient()
 
   const { addTypingEvent, removeTypingEventById, removeAllTypingEventsByAuthorId } =
@@ -87,11 +95,7 @@ export function useConversationMessagesJoltEvents({ conversationId, messageCache
       }
     }
 
-    const targetQueryKeys = queryKeysForEvent(
-      e.event,
-      cachesTouchedBy(data.reply_root_id),
-      messageCaches
-    )
+    const targetQueryKeys = queryKeysForEvent(e.event, view, data)
     targetQueryKeys.forEach(queryKey =>
       updateCacheWithMessage(queryClient, queryKey, message, e.event)
     )
@@ -116,11 +120,7 @@ export function useConversationMessagesJoltEvents({ conversationId, messageCache
       currentPersonId: currentPerson.id,
     })
 
-    queryKeysForEvent(
-      'message.destroyed',
-      cachesTouchedBy(data.reply_root_id),
-      messageCaches
-    ).forEach(queryKey =>
+    queryKeysForEvent('message.destroyed', view, data).forEach(queryKey =>
       queryClient.setQueryData<QueryData>(queryKey, prev =>
         deleteRecordInPagesData({ data: prev, record: message })
       )
@@ -128,11 +128,13 @@ export function useConversationMessagesJoltEvents({ conversationId, messageCache
   }
 
   const handleReactionJoltEvent = async (e: JoltReactionEvent) => {
-    queryKeysForEvent(
-      'reaction',
-      cachesTouchedBy(e.data.data.reply_root_id),
-      messageCaches
-    ).forEach(queryKey => updateCacheWithReaction(queryClient, queryKey, e, currentPerson.id))
+    const data = {
+      sort_key: e.data.data.message_sort_key,
+      reply_root_id: e.data.data.reply_root_id,
+    }
+    queryKeysForEvent('reaction', view, data).forEach(queryKey =>
+      updateCacheWithReaction(queryClient, queryKey, e, currentPerson.id)
+    )
   }
 
   const handleTypingEvent = async (e: JoltTypingEvent) => {

package/src/hooks/use_fetch_newer_messages.ts

@@ -2,10 +2,11 @@ import { useQueryClient } from '@tanstack/react-query'
 import { useCallback } from 'react'
 import { ApiCollection, MessageResource } from '../types'
 import { prependNewerPage } from '../utils/cache/prepend_newer_page'
-import { RequestData } from '../utils/client'
 import { getMessagesRequestArgs } from '../utils/request/get_messages'
 import { useApiClient } from './use_api_client'
 
+const MAX_PAGES = 5
+
 type Options = {
   conversation_id: number
   reply_root_id?: string | null
@@ -17,20 +18,26 @@ export const useFetchNewerMessages = ({ conversation_id, reply_root_id, queryKey
   const apiClient = useApiClient()
 
   return useCallback(
-    (newestMessageId: string) => {
+    async (newestMessageId: string) => {
       const { url, data } = getMessagesRequestArgs({ conversation_id, reply_root_id })
-      const where = { id_gt: newestMessageId }
-      const pageParam: Partial<RequestData> = { where, order: 'asc' }
+      const pages: ApiCollection<MessageResource>[] = []
+      let cursor: string | undefined = newestMessageId
 
-      return apiClient.chat
-        .get<ApiCollection<MessageResource>>({ url, data: { ...data, where, order: 'asc' } })
-        .then(page => {
-          queryClient.setQueryData<Parameters<typeof prependNewerPage<MessageResource>>[0]>(
-            queryKey,
-            prev => prependNewerPage(prev, page, pageParam)
-          )
+      while (cursor && pages.length < MAX_PAGES) {
+        const page: ApiCollection<MessageResource> = await apiClient.chat.get({
+          url,
+          data: { ...data, where: { id_gt: cursor }, order: 'asc' },
         })
-        .catch(() => {})
+        pages.push(page)
+        cursor = page.meta?.next?.idGt
+      }
+
+      queryClient.setQueryData<Parameters<typeof prependNewerPage<MessageResource>>[0]>(
+        queryKey,
+        prev => prependNewerPage(prev, pages)
+      )
+      const moreThanWeFetched = !!cursor
+      if (moreThanWeFetched) await queryClient.invalidateQueries({ queryKey })
     },
     [apiClient, conversation_id, queryClient, queryKey, reply_root_id]
   )

package/src/hooks/use_fetch_newer_on_foreground.ts

@@ -2,7 +2,7 @@ import { useEffect, useRef } from 'react'
 import { useAppState } from './use_app_state'
 
 type Options = {
-  fetchNewer: (newestMessageId: string) => void
+  fetchNewer: (newestMessageId: string) => Promise<void>
   newestMessageId?: string
   enabled: boolean
 }
@@ -20,6 +20,6 @@ export const useFetchNewerOnForeground = ({ fetchNewer, newestMessageId, enabled
     wasInBackground.current = false
     if (!returnedToForeground || !enabled || !newestMessageId) return
 
-    fetchNewer(newestMessageId)
+    fetchNewer(newestMessageId).catch(() => {})
   }, [appState, enabled, fetchNewer, newestMessageId])
 }

package/src/hooks/use_held_back_messages.ts

@@ -0,0 +1,33 @@
+import { useCallback, useEffect, useRef } from 'react'
+
+type Options = {
+  fetchNewer: (newestMessageId: string) => Promise<void>
+  newestMessageId?: string
+  readingHistory: boolean
+  caughtUp: boolean
+}
+
+export const useHeldBackMessages = ({
+  fetchNewer,
+  newestMessageId,
+  readingHistory,
+  caughtUp,
+}: Options) => {
+  const heldBackSince = useRef<string | null>(null)
+
+  const onSkippedNewMessage = useCallback(() => {
+    heldBackSince.current ??= newestMessageId ?? null
+  }, [newestMessageId])
+
+  useEffect(() => {
+    const since = heldBackSince.current
+    if (readingHistory || !caughtUp || !since) return
+
+    heldBackSince.current = null
+    fetchNewer(since).catch(() => {
+      heldBackSince.current ??= since
+    })
+  }, [caughtUp, fetchNewer, readingHistory])
+
+  return { onSkippedNewMessage }
+}