How to get latest fetched page on useInfiniteQuery

[mareksupruniuk]

Hi,
I use useInfiniteQuery in my project, bi-directional with initialData. Let's assume I need to hit analytics service when a new page is being fetched.

I'm trying to figure out how to tell what's the latest fetched page, however both ways:

1. using onSuccess config function
2. awaiting for fetchPreviousPage/fetchNextPage promise data
   return full list of pages, there's no way to tell if a single data.pages[N] is read from cache or was just received from API.

I read docs a few times and search here on github, but with no success. Am I missing something?

The ideal solution would be to have extra onSuccess param:

useInfinityQuery(queryKey, queryFn, {
  onSuccess: (data, newData) => { ... },
});

I managed to solve my problem by using extra CACHE object and unique id per page. The solution seems to be a bit hacky and error prone, also this is very simplified version of what I'm working on:

type SomeType = { cursor: number; items: any[] };

type Params = {
  cursor: number;
  id: string | undefined;
};

type ID = number;
type Props = {
  someId: ID;
  onSuccess: (
    data: InfiniteData<SomeType>,
    newData: InfiniteData<SomeType>
  ) => void;
};

const CACHE = {} as Record<ID, string[]>;

const fakeAPICall = (params: Params): Promise<SomeType> =>
  Promise.resolve({} as SomeType);

export const useCustomHook = ({ onSuccess, someId }: Props) => {
  const queryKey = ["foo-bar", someId];
  const defaultParam = { cursor: 0, id: undefined };
  const queryFn = ({
    pageParam = defaultParam,
  }: QueryFunctionContext<QueryKey, Params>) => fakeAPICall(pageParam);

  const query = useInfiniteQuery(queryKey, queryFn, {
    getNextPageParam: (firstPage) => {
      return {
        cursor: firstPage.cursor + 1,
        id: uuid(),
      };
    },
    getPreviousPageParam: (lastPage) => {
      return {
        cursor: lastPage.cursor - 1,
        id: uuid(),
      };
    },
    onSuccess: (data) => {
      const { pageParams, pages } = data;
      const pageIds = (pageParams as Params[]).map((params) => params?.id);
      const newData: InfiniteData<SomeType> = {
        pageParams: [],
        pages: [],
      };

      if (!CACHE[someId]) {
        CACHE[someId] = [];
      }
      const cachedPageIds = CACHE[someId];

      pageIds.forEach((id, index) => {
        const isPageLoaded = cachedPageIds.includes(id);
        if (isPageLoaded) return;

        const params = (pageParams[index] as Params) ?? undefined;

        newData.pageParams.push(params);
        newData.pages.push(pages[index]);
      });

      CACHE[someId] = pageIds;
      onSuccess?.(data, newData);
    },
  });

  return query;
};

[TkDodo]

I think you'd want to await fetchNextPage() and then you can call the analytics service with the result? Here, the last page in the array is the one you've just fetched. same for await fetchPreviousPage, where it should be the first page. This will also make sure it doesn't occur on refetches