T
TanStack•10mo ago
rare-sapphire

Infinite query fetches next page on every rerender. Why?

I toggle a setting showOwnOnly which triggers a rerender. On that rerender, I can see, that the infiniste query i am using fetches the next page. The queryKey is stable (otherwise it probably would start at page 0 again). Here is how I use the query: 
const today = new Date();
const date = new Date(today.getFullYear(), today.getMonth(), today.getDate());

const { events: ownEvents } = useOwnEvents(); // not a query but a store
const showOwnOnly = useSettingsStore((state) => state.showOwnOnly); // this is what i toggle

const { data, fetchNextPage, isFetchingNextPage, isFetched } = useEvents({
    startDateTime: stripMillis(date), // this is stable for a full day
    size: 20,
});

const flatEventList = data?.pages.flatMap((page) => page.events ?? []) ?? [];
const events = showOwnOnly ? ownEvents : [...flatEventList, ...ownEvents ];

return <... using events to render a list >
const today = new Date();
const date = new Date(today.getFullYear(), today.getMonth(), today.getDate());

const { events: ownEvents } = useOwnEvents(); // not a query but a store
const showOwnOnly = useSettingsStore((state) => state.showOwnOnly); // this is what i toggle

const { data, fetchNextPage, isFetchingNextPage, isFetched } = useEvents({
    startDateTime: stripMillis(date), // this is stable for a full day
    size: 20,
});

const flatEventList = data?.pages.flatMap((page) => page.events ?? []) ?? [];
const events = showOwnOnly ? ownEvents : [...flatEventList, ...ownEvents ];

return <... using events to render a list >
useEvents is this: 
export function useEvents(
  filters: Record<string, any> = {}
) {
  return useInfiniteQuery({
    queryKey: ["events", filters],
    queryFn: async () => {
      return fetchSomething();
    },
    initialPageParam: 0,
    getNextPageParam: (lastPage) => {
      if (lastPage.page.number < lastPage.page.totalPages - 1) {
        return lastPage.page.number + 1;
      } else {
        return undefined;
      }
    },
    staleTime: Infinity,
    refetchOnMount: false,
    refetchOnWindowFocus: false,
    refetchOnReconnect: false
  });
}
export function useEvents(
  filters: Record<string, any> = {}
) {
  return useInfiniteQuery({
    queryKey: ["events", filters],
    queryFn: async () => {
      return fetchSomething();
    },
    initialPageParam: 0,
    getNextPageParam: (lastPage) => {
      if (lastPage.page.number < lastPage.page.totalPages - 1) {
        return lastPage.page.number + 1;
      } else {
        return undefined;
      }
    },
    staleTime: Infinity,
    refetchOnMount: false,
    refetchOnWindowFocus: false,
    refetchOnReconnect: false
  });
}
Is this by design? How can I stop that from happening?
1 Reply
fascinating-indigo
fascinating-indigo•10mo ago
Hey there! It is hard to say exactly without seeing the fetchSomething call but using in the queryFn you would be using it like: 
queryFn: async ({ pageParam = 0 }) => {
      return fetchSomething(pageParam, filters);
    },
queryFn: async ({ pageParam = 0 }) => {
      return fetchSomething(pageParam, filters);
    },
Where you are passing in a pageParam which is used to paginated the calls. Can you confirm that this is the setup you have? Something else to check would be that this queryFn is async but you aren't awaiting the fetchSomething which may be causing some weird double firing, probably not, but worth checking. I'd log out these pageParams and the lastPage and see if there is any flaw in the logic there. Next I'd make sure that the fetchNextPage is not double firing in the location you have that

Did you find this page helpful?