Should tanstack/query Cache Pages Instead of Fetching on Each Pagination Click? about query HOT 3 CLOSED

please read up on the documentation and concepts of TanStack Query. You need to specify staleTime if you don't want background refetches:

https://tanstack.com/query/latest/docs/framework/react/guides/important-defaults

from query.

@TkDodo I think there's been a misunderstanding. My issue isn't with background refetches; those are working as expected. The problem is that when I navigate to a page that has already been refetched, it triggers another refetch. You can observe that every time, fetchProjects is called with the page ID that has already been fetched.

  query = injectQuery(() => ({
    queryKey: ['projects', this.page()],
    queryFn: () => lastValueFrom(fetchProjects(this.page())),
    placeholderData: keepPreviousData,
    staleTime: 5000,   <-- this is exist..
  }));

from query.

I think it's because the call to prefetchQuery also doesn't have staleTime, so it fetches the next page on every navigation. Everything is fine with 5s staleTime set globally:

defaultOptions: {
  queries: {
    gcTime: 1000 * 60 * 60 * 24, // 24 hours
    staleTime: 5000,
  },

from query.