refetching with useInfiniteQuery

[nethalayaswanth]

apologise for bad formatting ,it's my first time writing in github

not sure whether solution lies in react-query or react,writing in the hope of any little thought would help me progress

useMessages hook which cache response corresponding to a particular cursor to [roomId, "messages"] key

const useMessages = ({ roomId, queryOptions, select }) => {
  return useInfiniteQuery(
    [roomId, "messages"],
    async () => {
   
      return await getMessages({ roomId })
    },
    {
      refetchOnMount:false,//idea is to refetch pages as per  shown via scrolling bottom-top and showing the stale data from cache if unable to refetch 
      select,
      refetchOnWindowFocus: false,
      ...(queryOptions && queryOptions),
    }
  );
};

useRoomMessages hook which select data in the pages to be shown ( local pagination to limit the messages to render ,sort of list virtualisation) and flatten them into an array
const [pages,setPages]=useState(0)

QUESTION:

useRoomMessages hook is enabled when user click on a chat item. Initial page is loaded from cache while fetching it from backend.
sequentially all pages are fetched in background when user scrolled to them

NOW user switch to another chatRoom and revisit this room where initial page (0) from cache is shown.

no needing of refetching pages refetched in the first instance because the socket events ensure the data is up to data

only the pages which are not fetched in first instance of hook and present in cache or pages not cached have to be fetched while scrolling

status like dataUpdatedAt foreach page of the query would be helpful to validate the corresponding page from its the initial loading of the app so i can fetch data only that is absolutely stale or not present in cache .while preventing refetches of up to date data