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

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

package/src/hooks/use_message_create_or_update.ts

@@ -1,5 +1,6 @@
 import { InfiniteData, useMutation } from '@tanstack/react-query'
 import { chatQueryClient } from '../contexts/api_provider'
+import { useConversationContext } from '../contexts/conversation_context'
 import { ApiCollection, ApiResource, MessageResource } from '../types'
 import { DenormalizedAttachmentResourceForCreate } from '../types/resources/denormalized_attachment_resource_for_create'
 import {
@@ -35,6 +36,12 @@ export function useMessageCreateOrUpdate({ conversationId, message, replyRootId
   const isEditing = !isNewMessage(message)
   const apiClient = useApiClient()
   const currentPerson = useCurrentPerson()
+  const { messagesQueryKey } = useConversationContext()
+  const liveQueryKey = getMessagesQueryKey({
+    conversation_id: conversationId,
+    reply_root_id: replyRootId,
+  })
+  const queryKey = isEditing ? (messagesQueryKey ?? liveQueryKey) : liveQueryKey
 
   const mutation = useMutation({
     mutationFn: ({ text, attachments, idempotentKey }: ResolvedMessageMutationVariables) => {
@@ -79,6 +86,7 @@ export function useMessageCreateOrUpdate({ conversationId, message, replyRootId
           message,
           text,
           replyRootId,
+          queryKey,
         })
 
         return { message: optimisticMessage }
@@ -102,10 +110,6 @@ export function useMessageCreateOrUpdate({ conversationId, message, replyRootId
 
       // Add error to the optimistic message from the cache on error
       if (optimisticMessage) {
-        const queryKey = getMessagesQueryKey({
-          conversation_id: conversationId,
-          reply_root_id: replyRootId,
-        })
         chatQueryClient.setQueryData(
           queryKey,
           (data: InfiniteData<ApiCollection<MessageResource>> | undefined) =>
@@ -125,10 +129,6 @@ export function useMessageCreateOrUpdate({ conversationId, message, replyRootId
       const { message: optimisticMessage } = context || {}
       const updatedMessage = result.data
       type QueryData = InfiniteData<ApiCollection<MessageResource>>
-      const queryKey = getMessagesQueryKey({
-        conversation_id: conversationId,
-        reply_root_id: replyRootId,
-      })
 
       // First remove the optimistic message if it exists
       if (optimisticMessage) {

package/src/hooks/use_message_reaction_toggle.ts

@@ -1,6 +1,7 @@
 import { InfiniteData, useMutation, useQueryClient } from '@tanstack/react-query'
 import { useCallback } from 'react'
 import { Alert } from 'react-native'
+import { useConversationContext } from '../contexts/conversation_context'
 import { ApiCollection, ApiResource, MessageResource } from '../types'
 import { ReactionCountResource } from '../types/resources/reaction'
 import { updateRecordInPagesData, REACTION_EMOJIS } from '../utils'
@@ -30,7 +31,8 @@ export function useMessageReactionToggle({
 }: UseMessageReactionToggleProps) {
   const apiClient = useApiClient()
   const queryClient = useQueryClient()
-  const queryKey = getMessagesQueryKey({ conversation_id })
+  const { messagesQueryKey } = useConversationContext()
+  const queryKey = messagesQueryKey ?? getMessagesQueryKey({ conversation_id })
   const message_id = message.id
 
   const toggleReaction = useCallback(

package/src/screens/conversation_new/components/services_form.tsx

@@ -45,7 +45,7 @@ export const ServicesForm = ({
   const customAvatarsEnabled = featureEnabled(availableFeatures.custom_conversation_avatars)
   const safetyLockEnabled = featureEnabled(availableFeatures.conversation_safety_lock)
   const [selectedPlanId, setSelectedPlanId] = useState<number | undefined>(initialPlanId)
-  const [filterByPlan, setFilterByPlan] = useState(!!initialPlanId)
+  const [filterByPlan, setFilterByPlan] = useState<boolean>(!!initialPlanId)
   const initialState = useMemo(() => uniq(initialTeamIds) || [], [initialTeamIds]) // Uniq here because services can send duplicates in the teams_i_lead response.
   const [selectedTeamIds, setSelectedTeamIds] = useState<number[]>(initialState)
 

package/src/screens/conversation_screen.tsx

@@ -33,6 +33,7 @@ import { useConversationMessages } from '../hooks/use_conversation_messages'
 import { useConversationMessagesJoltEvents } from '../hooks/use_conversation_messages_jolt_events'
 import { useFetchNewerMessages } from '../hooks/use_fetch_newer_messages'
 import { useFetchNewerOnForeground } from '../hooks/use_fetch_newer_on_foreground'
+import { useHeldBackMessages } from '../hooks/use_held_back_messages'
 import { useMarkLatestMessageRead } from '../hooks/use_mark_latest_message_read'
 import {
   analyticsEvents,
@@ -44,7 +45,9 @@ import { useVideoModerationJoltEvents } from '../hooks/use_video_moderation_jolt
 import { ConversationResource } from '../types/resources/conversation'
 import { ConversationBadgeResource } from '../types/resources/conversation_badge'
 import { MessageResource } from '../types/resources/message'
+import { newestPersistedMessageId } from '../utils/cache/messages_cache'
 import { gatedMessageCache } from '../utils/gated_message_cache'
+import { getMessagesQueryKey } from '../utils/request/get_messages'
 import { decodeUlidTime } from '../utils/ulid'
 
 export type ConversationRouteProps = {
@@ -85,6 +88,7 @@ export function ConversationScreen({ route }: ConversationScreenProps) {
     <ConversationContextProvider
       conversationId={conversation_id}
       currentPageReplyRootId={reply_root_id ?? null}
+      messagesQueryKey={getMessagesQueryKey({ conversation_id, reply_root_id, anchor })}
     >
       {anchor ? (
         <AnchorNotFoundBoundary onAnchorNotFound={dropAnchor}>
@@ -134,23 +138,27 @@ function ConversationScreenContent({
   const caughtUp = !hasPreviousPage
   const [showJumpToBottomButton, setShowJumpToBottomButton] = useState(false)
   const readingHistory = showJumpToBottomButton
-  const skippedNewMessages = useRef(false)
-  const messageCaches = [
-    gatedMessageCache({
+  const newestMessageId = newestPersistedMessageId(messages)
+  const fetchNewer = useFetchNewerMessages({ conversation_id, reply_root_id, queryKey })
+  const { onSkippedNewMessage } = useHeldBackMessages({
+    fetchNewer,
+    newestMessageId,
+    readingHistory,
+    caughtUp,
+  })
+  useConversationJoltEvents({ conversationId: conversation_id })
+  useConversationMessagesJoltEvents({
+    conversationId: conversation_id,
+    replyRootId: reply_root_id ?? null,
+    messageCache: gatedMessageCache({
       queryKey,
       acceptNewMessages: caughtUp && !readingHistory,
-      onSkippedNewMessage: () => {
-        skippedNewMessages.current = true
-      },
+      onSkippedNewMessage,
     }),
-  ]
-  const newestMessageId = messages[0]?.id
-  useConversationJoltEvents({ conversationId: conversation_id })
-  useConversationMessagesJoltEvents({ conversationId: conversation_id, messageCaches })
+  })
   const { markHandledByMessageForm } = useVideoModerationJoltEvents()
   useEnsureConversationsRouteExists()
   useMarkLatestMessageRead({ conversation, messages, enabled: !behindLatest })
-  const fetchNewer = useFetchNewerMessages({ conversation_id, reply_root_id, queryKey })
   useFetchNewerOnForeground({ fetchNewer, newestMessageId, enabled: anchored && caughtUp })
   const noMessages = messages.length === 0
 
@@ -187,9 +195,9 @@ function ConversationScreenContent({
   }, [handleReturnToBottom, onExitAnchoredMode])
   const jumpToLatest = useCallback(() => {
     setShowJumpToBottomButton(false)
-    if (behindLatest) exitAnchoredMode()
+    if (anchored) exitAnchoredMode()
     else handleReturnToBottom()
-  }, [behindLatest, exitAnchoredMode, handleReturnToBottom])
+  }, [anchored, exitAnchoredMode, handleReturnToBottom])
 
   const trackScroll = (event: any) => {
     const offsetY = event.nativeEvent.contentOffset.y
@@ -203,13 +211,6 @@ function ConversationScreenContent({
     fetchPreviousPage()
   }
 
-  useEffect(() => {
-    if (readingHistory || !caughtUp || !newestMessageId || !skippedNewMessages.current) return
-
-    skippedNewMessages.current = false
-    fetchNewer(newestMessageId)
-  }, [caughtUp, fetchNewer, newestMessageId, readingHistory])
-
   useEffect(() => {
     if (reply_root_id) {
       navigation.setParams({

package/src/screens/message_actions_screen.tsx

@@ -9,6 +9,7 @@ import { useReactionStyles } from '../components/conversation/message_reaction'
 import FormSheet, { getFormSheetScreenOptions } from '../components/primitive/form_sheet'
 import { useCreateAndroidRippleColor, useFontScale, useTheme } from '../hooks'
 import { useApiClient } from '../hooks/use_api_client'
+import { useConversationMessageLookup } from '../hooks/use_conversation_message_lookup'
 import { useConversationMessages } from '../hooks/use_conversation_messages'
 import { availableFeatures, useFeatures } from '../hooks/use_features'
 import { useMessageReactionToggle } from '../hooks/use_message_reaction_toggle'
@@ -41,11 +42,8 @@ export function MessageActionsScreen({ route }: MessageActionsScreenProps) {
     isSystemMessage,
   } = route.params
 
-  const { messages, refetch } = useConversationMessages(
-    { conversation_id },
-    { refetchOnMount: false }
-  )
-  const message = messages.find(m => m.id === message_id)
+  const { refetch } = useConversationMessages({ conversation_id }, { refetchOnMount: false })
+  const message = useConversationMessageLookup({ conversation_id, message_id })
 
   if (!message) return null
 

package/src/screens/message_report_screen.tsx

@@ -14,7 +14,7 @@ import {
 } from '../components/display/platform_modal_header_buttons'
 import BlankState from '../components/primitive/blank_state_primitive'
 import { useTheme } from '../hooks'
-import { useConversationMessages } from '../hooks/use_conversation_messages'
+import { useConversationMessageLookup } from '../hooks/use_conversation_message_lookup'
 import { useReportMessage } from '../hooks/use_report_message'
 import { MessageResource } from '../types'
 import { MessageReportReason } from '../types/resources/message_report'
@@ -51,8 +51,7 @@ export type MessageReportScreenProps = StaticScreenProps<{
 export function MessageReportScreen({ route }: MessageReportScreenProps) {
   const { conversation_id, message_id } = route.params
 
-  const { messages } = useConversationMessages({ conversation_id }, { refetchOnMount: false })
-  const message = messages.find(m => m.id === message_id)
+  const message = useConversationMessageLookup({ conversation_id, message_id })
 
   if (!message) return null
 

package/src/screens/reactions_screen.tsx

@@ -7,7 +7,7 @@ import { Avatar, Text } from '../components'
 import { Tabs } from '../components/display/tabs'
 import FormSheet, { getFormSheetScreenOptions } from '../components/primitive/form_sheet'
 import { useSuspenseGet, useTheme } from '../hooks'
-import { useConversationMessages } from '../hooks/use_conversation_messages'
+import { useConversationMessageLookup } from '../hooks/use_conversation_message_lookup'
 import { useFontScale } from '../hooks/use_font_scale'
 import { MemberResource } from '../types'
 import { ReactionCountResource } from '../types/resources/reaction'
@@ -31,9 +31,7 @@ export function ReactionsScreen({ route }: ReactionScreenProps) {
   const { conversation_id, message_id, reaction_value } = route.params
   const styles = useStyles()
 
-  const { messages } = useConversationMessages({ conversation_id }, { refetchOnMount: false })
-
-  const message = messages.find(m => m.id === message_id)
+  const message = useConversationMessageLookup({ conversation_id, message_id })
   const reactionCounts = message?.reactionCounts || []
   const initialReactionCount =
     reactionCounts.find(r => r.value === reaction_value) || reactionCounts[0]

package/src/utils/cache/__tests__/find_message_in_caches.test.ts

@@ -0,0 +1,37 @@
+import { QueryClient } from '@tanstack/react-query'
+import { getMessagesQueryKey } from '../../request/get_messages'
+import { findMessageInCaches } from '../find_message_in_caches'
+
+const page = (ids: string[]) => ({
+  data: ids.map(id => ({ id, type: 'Message' })),
+  links: {},
+  meta: { count: ids.length, totalCount: ids.length },
+})
+
+const seed = (queryClient: QueryClient, key: unknown[], ids: string[]) =>
+  queryClient.setQueryData(key, { pages: [page(ids)], pageParams: [{}] })
+
+describe('findMessageInCaches', () => {
+  const queryClient = new QueryClient()
+
+  beforeEach(() => {
+    queryClient.clear()
+    seed(queryClient, getMessagesQueryKey({ conversation_id: 1 }), ['01C', '01B'])
+    seed(queryClient, getMessagesQueryKey({ conversation_id: 1, anchor: '01A' }), ['01A', '00Z'])
+    seed(queryClient, getMessagesQueryKey({ conversation_id: 1, reply_root_id: '01B' }), ['01R'])
+    seed(queryClient, getMessagesQueryKey({ conversation_id: 2 }), ['02A'])
+  })
+
+  it('finds a message in the live cache', () => {
+    expect(findMessageInCaches(queryClient, 1, '01B')?.id).toBe('01B')
+  })
+
+  it('finds a message that only the anchored cache holds', () => {
+    expect(findMessageInCaches(queryClient, 1, '00Z')?.id).toBe('00Z')
+  })
+
+  it('ignores reply threads and other conversations', () => {
+    expect(findMessageInCaches(queryClient, 1, '01R')).toBeUndefined()
+    expect(findMessageInCaches(queryClient, 1, '02A')).toBeUndefined()
+  })
+})

package/src/utils/cache/__tests__/messages_cache.test.ts

@@ -1,7 +1,7 @@
 import { InfiniteData, QueryClient } from '@tanstack/react-query'
 import type { ApiCollection, MessageResource } from '../../../types'
 import type { PersonResource } from '../../../types/resources/person'
-import { updateCacheWithMessage } from '../messages_cache'
+import { newestPersistedMessageId, updateCacheWithMessage } from '../messages_cache'
 
 type MessagesQueryData = InfiniteData<ApiCollection<MessageResource>>
 
@@ -87,3 +87,16 @@ describe('updateCacheWithMessage on message.created', () => {
     expect(idsInCache(queryClient)).toEqual(['01F', '01B-temp', '01A-temp'])
   })
 })
+
+describe('newestPersistedMessageId', () => {
+  it('skips optimistic rows so a failed send cannot become the catch-up cursor', () => {
+    const messages = [message({ id: '01ZZZ-temp' }), message({ id: '01B' }), message({ id: '01A' })]
+
+    expect(newestPersistedMessageId(messages)).toBe('01B')
+  })
+
+  it('is undefined when nothing has been persisted', () => {
+    expect(newestPersistedMessageId([message({ id: '01ZZZ-temp' })])).toBeUndefined()
+    expect(newestPersistedMessageId([])).toBeUndefined()
+  })
+})

package/src/utils/cache/__tests__/prepend_newer_page.test.ts

@@ -5,31 +5,30 @@ const page = (ids: string[], next?: { idGt: string }) => ({
   links: {},
   meta: { count: ids.length, totalCount: ids.length, next },
 })
-const pageParam = { where: { id_gt: '01C' }, order: 'asc' }
 
 describe('prependNewerPage', () => {
   const cached = { pages: [page(['01C', '01B']), page(['01A'])], pageParams: [{}, { offset: 1 }] }
 
-  it('prepends only the messages the cache does not already hold', () => {
-    const result = prependNewerPage(cached, page(['01C', '01D', '01E']), pageParam)
+  it('merges the new rows into the first page and leaves the page params alone', () => {
+    const result = prependNewerPage(cached, [page(['01C', '01D', '01E'])])
 
-    expect(result?.pages[0].data.map(m => m.id)).toEqual(['01D', '01E'])
-    expect(result?.pages).toHaveLength(3)
-    expect(result?.pageParams[0]).toEqual(pageParam)
+    expect(result?.pages).toHaveLength(2)
+    expect(result?.pages[0].data.map(m => m.id)).toEqual(['01D', '01E', '01C', '01B'])
+    expect(result?.pageParams).toEqual(cached.pageParams)
   })
 
-  it('leaves the cache alone when nothing new came back', () => {
-    expect(prependNewerPage(cached, page(['01C']), pageParam)).toBe(cached)
-  })
+  it('merges every fetched batch, newest last', () => {
+    const result = prependNewerPage(cached, [page(['01D', '01E']), page(['01F'])])
 
-  it('still prepends an empty page when the server reports more newer messages', () => {
-    const result = prependNewerPage(cached, page(['01C'], { idGt: '01C' }), pageParam)
+    expect(result?.pages[0].data.map(m => m.id)).toEqual(['01D', '01E', '01F', '01C', '01B'])
+  })
 
-    expect(result?.pages[0].data).toEqual([])
-    expect(result?.pages[0].meta.next).toEqual({ idGt: '01C' })
+  it('returns the same data when nothing new came back', () => {
+    expect(prependNewerPage(cached, [page(['01C'])])).toBe(cached)
+    expect(prependNewerPage(cached, [])).toBe(cached)
   })
 
   it('does nothing without cached data', () => {
-    expect(prependNewerPage(undefined, page(['01D']), pageParam)).toBeUndefined()
+    expect(prependNewerPage(undefined, [page(['01D'])])).toBeUndefined()
   })
 })

package/src/utils/cache/find_message_in_caches.ts

@@ -0,0 +1,20 @@
+import { InfiniteData, QueryClient } from '@tanstack/react-query'
+import { ApiCollection, MessageResource } from '../../types'
+import { getMessagesRequestArgs } from '../request/get_messages'
+
+type QueryData = InfiniteData<ApiCollection<MessageResource>>
+
+export const findMessageInCaches = (
+  queryClient: QueryClient,
+  conversation_id: number,
+  message_id: string
+): MessageResource | undefined => {
+  const { url } = getMessagesRequestArgs({ conversation_id })
+
+  for (const [, data] of queryClient.getQueriesData<QueryData>({ queryKey: [url] })) {
+    const found = data?.pages.flatMap(page => page.data).find(message => message.id === message_id)
+    if (found) return found
+  }
+
+  return undefined
+}

package/src/utils/cache/messages_cache.ts

@@ -135,6 +135,9 @@ type MessagesQueryData = InfiniteData<ApiCollection<MessageResource>>
 export function isTemporaryMessageId(messageId?: string | null): boolean {
   return !!messageId && messageId.endsWith('-temp')
 }
+export function newestPersistedMessageId(messages: MessageResource[]): string | undefined {
+  return messages.find(message => !isTemporaryMessageId(message.id))?.id
+}
 export function isNewMessage(message?: MessageResource): boolean {
   return !message?.id || isTemporaryMessageId(message.id)
 }

package/src/utils/cache/optimistically_update_message.ts

@@ -9,19 +9,16 @@ export function optimisticallyUpdateMessage({
   message,
   text,
   replyRootId,
+  queryKey = getMessagesQueryKey({ conversation_id: conversationId, reply_root_id: replyRootId }),
 }: {
   conversationId: number
   message: MessageResource
   text: string
   replyRootId?: string | null
+  queryKey?: unknown[]
 }) {
   type QueryData = InfiniteData<ApiCollection<MessageResource>>
 
-  const queryKey = getMessagesQueryKey({
-    conversation_id: conversationId,
-    reply_root_id: replyRootId,
-  })
-
   let optimisticMessage = message
 
   chatQueryClient.setQueryData<QueryData>(queryKey, data =>

package/src/utils/cache/prepend_newer_page.ts

@@ -6,17 +6,14 @@ type PagesData<T extends ResourceObject> = InfiniteData<ApiCollection<T>, Partia
 
 export function prependNewerPage<T extends ResourceObject>(
   data: PagesData<T> | undefined,
-  page: ApiCollection<T>,
-  pageParam: Partial<RequestData>
+  pages: ApiCollection<T>[]
 ): PagesData<T> | undefined {
-  if (!data) return data
+  if (!data || data.pages.length === 0) return data
 
-  const knownIds = new Set(data.pages.flatMap(p => p.data.map(record => record.id)))
-  const fresh = page.data.filter(record => !knownIds.has(record.id))
-  if (fresh.length === 0 && !page.meta?.next) return data
+  const knownIds = new Set(data.pages.flatMap(page => page.data.map(record => record.id)))
+  const fresh = pages.flatMap(page => page.data).filter(record => !knownIds.has(record.id))
+  if (fresh.length === 0) return data
 
-  return {
-    pages: [{ ...page, data: fresh }, ...data.pages],
-    pageParams: [pageParam, ...data.pageParams],
-  }
+  const [first, ...rest] = data.pages
+  return { ...data, pages: [{ ...first, data: [...fresh, ...first.data] }, ...rest] }
 }