hassanzohdy/atomic-query/infinite

function useInfiniteQuery<TPage, TPageParam>(
  options: UseInfiniteQueryOptions<TPage, TPageParam>,
): UseInfiniteQueryResult<TPage, TPageParam>
type UseInfiniteQueryOptions<TPage, TPageParam> = Omit<AddQueryOptions<...>, "queryFn"> & {
  queryFn: (ctx: { pageParam: TPageParam; signal: AbortSignal }) => Promise<TPage>;
  initialPageParam: TPageParam;
  getNextPageParam: (
    lastPage: TPage,
    allPages: TPage[],
    lastPageParam: TPageParam,
    allPageParams: TPageParam[],
  ) => TPageParam | undefined;
};
type UseInfiniteQueryResult<TPage, TPageParam> = Query<{
  pages: TPage[];
  pageParams: TPageParam[];
}> & {
  hasNextPage: boolean;
  isFetchingNextPage: boolean;
  fetchNextPage: () => Promise<void>;
};

type Page = { items: Post[]; nextCursor: number | null };
const q = useInfiniteQuery<Page, number>({
  queryKey: ["posts"],
  queryFn: ({ pageParam, signal }) =>
    fetch(`/api/posts?cursor=${pageParam}`, { signal }).then(r => r.json()),
  initialPageParam: 0,
  getNextPageParam: last => last.nextCursor ?? undefined,
});
// Flatten for rendering:
const allPosts = q.data?.pages.flatMap(p => p.items) ?? [];
return (
  <>
    {allPosts.map(p => <Post key={p.id} post={p} />)}
    <button
      disabled={!q.hasNextPage || q.isFetchingNextPage}
      onClick={() => q.fetchNextPage()}>
      {q.isFetchingNextPage ? "Loading…" : q.hasNextPage ? "Load more" : "No more"}
    </button>
  </>
);

const q = useInfiniteQuery<Page, number>({
  queryKey: ["users", "page"],
  queryFn: ({ pageParam, signal }) =>
    fetch(`/api/users?offset=${pageParam}&limit=20`, { signal }).then(r => r.json()),
  initialPageParam: 0,
  getNextPageParam: (lastPage, allPages) => {
    if (lastPage.items.length < 20) return undefined; // no more
    return allPages.length * 20;
  },
});

type Page = { items: Item[]; total: number };
const q = useInfiniteQuery<Page, number>({
  queryKey: ["items"],
  queryFn: ({ pageParam, signal }) => fetchItems(pageParam, signal),
  initialPageParam: 1,
  getNextPageParam: (last, allPages, lastParam) => {
    const fetched = allPages.reduce((sum, p) => sum + p.items.length, 0);
    if (fetched >= last.total) return undefined;
    return lastParam + 1;
  },
});

queryAtom.invalidate({ queryKey: ["posts"] });
// → next render runs queryFn with initialPageParam again, pages array
//   resets to length 1.

// rough sketch
const current = queryAtom.getData(["posts"]);
if (!current) return;
for (const param of current.pageParams) {
  // refetch each page param
}