UseInfiniteQuery fetches all cached data when rendering component

[marianoagopian]

Hello I'm new using react query and I am facing a problem. I'm using useInfiniteQuery and if i have fetched various pages and stored them in the cache when I re-enter the component and try to fetch the first page it automatically fetches all the previous fetched pages. I don't know if this is suppose to work this way or if i'm doing something wrong. Here is how my code looks like.

export const useGetConversations = ({ status, schoolRoleId, appliedFilters = {}, isSchoolRoleType, }: Props) => { const result = useInfiniteQuery({ queryKey: [keys.getConversations, schoolRoleId, status, appliedFilters], queryFn: ({ pageParam = 1 }) => getConversations({ page: pageParam, status, schoolRoleId, ...appliedFilters, }), initialPageParam: 1, getNextPageParam: (lastPage) => lastPage.hasNextPage ? lastPage.nextCursor : undefined, retry: false, }); };

[TkDodo]

https://tanstack.com/query/v5/docs/react/guides/infinite-queries#what-happens-when-an-infinite-query-needs-to-be-refetched