Why cache isn't working when using Tanstack Query?

[Ezetorc]

My page has different sections. When I unmount and then re-mount a section, for example, Home.tsx, the posts from usePaginatedPosts (custom hook) are re-fetched, instead of using the ones from cache. I don't understand why Tanstack Query is re-fetching all the posts instead of using the ones in cache.

usePaginatedPosts.ts:

export function usePaginatedPosts () {
  const queryClient = useQueryClient()
  const view = useInView()
  const pagination = useInfiniteQuery({
    queryKey: ['posts'],
    queryFn: ({ pageParam = 1 }) => PostService.getAll({ page: pageParam }),
    initialPageParam: 1,
    getNextPageParam: (lastPage, allPages) =>
      lastPage?.length ? allPages.length + 1 : undefined,
    staleTime: getMinutes(5),
    gcTime: getMinutes(5),
    refetchOnMount: false,
    refetchOnWindowFocus: false
  })

  const onDeleteMutationSuccess = (postId: number) => {
    queryClient.setQueryData(
      ['posts'],
      (oldData: InfiniteData<Post[], unknown> | undefined) => {
        if (!oldData) return oldData

        return {
          ...oldData,
          pages: oldData.pages.map(posts =>
            posts.filter(post => post.id !== postId)
          )
        }
      }
    )
  }

  const deleteMutation = useMutation({
    mutationFn: (postId: number) => PostService.delete({ postId }),
    onSuccess: onDeleteMutationSuccess
  })

  const deletePost = (postId: number) => {
    deleteMutation.mutate(postId)
  }

  useEffect(() => {
    if (view.inView && pagination.hasNextPage) {
      pagination.fetchNextPage()
    }
  }, [pagination, view.inView])

  return {
    status: pagination.status,
    posts: pagination.data?.pages.flat() ?? [],
    hasMore: pagination.hasNextPage,
    ref: view.ref,
    deletePost
  }
}

main.tsx:

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: getMinutes(5),
      gcTime: getMinutes(10),
      refetchOnWindowFocus: false
    }
  }
})

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <QueryClientProvider client={queryClient}>
      <Root />
      <ReactQueryDevtools initialIsOpen={false} />
    </QueryClientProvider>
  </StrictMode>
)

I tried by changing values like staleTime or gcTime, but is all the same. I also tried creating a QueryCache and by using persistQueryClient, but it also doesn't work.

[TkDodo]

please show a minimal, runnable reproduction with stackblitz or codesandbox