useInfiniteQuery() hook fetches all pages when a new page is requested even though stale time is not elapsed.

[abhay0019]

Describe the bug

We’re using useInfiniteQuery() in a chat app to load messages between users. Each conversation is stored using a query key like:

[CurrentUserGUID, ParticipantGUID]

Messages are loaded in pages.

However, when we load messages for a new participant (e.g., [CurrentUserGUID, ParticipantGUIDN]), we noticed that React Query also re-fetches data for previously loaded conversations like:

[CurrentUserGUID, ParticipantGUID1]
[CurrentUserGUID, ParticipantGUID2]
...
[CurrentUserGUID, ParticipantGUID(N-1)]

This causes unnecessary network requests for older chats.

const key = [userId, receiverId]
  return useInfiniteQuery({
    queryKey: key,
    queryFn: ({pageParam = 1}) =>
      fetchMessages({pageParam, userId, receiverId}),
    getNextPageParam: lastPage => lastPage.nextPage,
    initialPageParam: 1,
  });

export const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      gcTime: Infinity,
      staleTime: 24 * 60 * 60 * 1000, // default staleTime will be 24 hours, queries need to override this prop as per the need.
      retry: 2,
      retryDelay: attemptIndex => Math.min(1000 * 2 ** attemptIndex, 30000),
      networkMode: 'offlineFirst',
      refetchOnWindowFocus: false,
      refetchOnReconnect: false,
      refetchOnMount: false
    },
  },
});

Your minimal, reproducible example

na

Steps to reproduce

Have give entire repro above.

Expected behavior

We expect the backend call only for the pages we are loading currently and not a re-fetch of all previously loaded pages.

How often does this bug happen?

None

Screenshots or Videos

No response

Platform

• React-Native, Android/IOS Simulators

Tanstack Query adapter

None

TanStack Query version

5.64.2 <=5.66.0

TypeScript version

using JS

Additional context

No response

[TkDodo]

we noticed that React Query also re-fetches data for previously loaded conversations like

I don’t know what that means. Please show a minimal reproduction instead of some code-snippets so that we can take a look.

Generally, React Query will re-fetch all pages in the cache for a given queryKey, which is on purpose. This sounds a lot like you’d want different query Keys for different conversations, but your example doesn’t show that. queryKey: key doesn’t tell me anything.

I’ll re-open once provided.