I have an infinite query setup like so for messages relating to a particular chat:
useInfiniteQuery({
queryKey: ["messages", selectedChat?._id],
queryFn: fetchMessages,
initialPageParam: selectedChat?.latestMessage?.createdAt,
getPreviousPageParam: (firstPage) => firstPage.previousTimestamp,
getNextPageParam: (lastPage) => lastPage.nextTimestamp,
staleTime: Infinity,
enabled: !!selectedChat?._id,
placeholderData: (prev) => prev,
})
Within an realtime event handler, I receieve a delete
event and call invalidate queries like so: queryClient.invalidateQueries({queryKey: ["messages", selectedChat._id]})
. According to the docs, each page is refetched sequentially when invalidated, and this is what happens. The first page is refetched, however once the first page refetch completes, it removes all the other previously loaded pages in the cache, and then refetches them again in order.
Is there a way I can keep previously loaded pages in the cache until the refetch for these particular pages(caused by invalidateQueries
) completes. I assumed placeholderData
was the way to accomplish this however the same behaviour occurs.