useInfiniteHits only showing current page of results instead of all results up to current page

[AbdelrahmanAhmed605]

Say I have a configuration of 10 hits per page. When I use <InfiniteHits/> it shows my first page of results, then clicking on "show more" shows both page 1 and page 2 of results (results 1-20). But when I use the useInfiniteHits hook, it only shows page 2 of results (results 11-20). I want to use the hook and append the results like in <InfiniteHits/>

This is how I am using my hook:

import { useInfiniteHits, UseInfiniteHitsProps } from 'react-instantsearch';
import { createInfiniteHitsSessionStorageCache } from 'instantsearch.js/es/lib/infiniteHitsCache';

const sessionStorageCache = createInfiniteHitsSessionStorageCache();

function CustomInfiniteHits({
  props
}: UseInfiniteHitsProps) {
  const {
    showMore,
    isLastPage,
    results: infiteResults,
  } = useInfiniteHits({ cache: sessionStorageCache });

  return (
    <>
      <div className="mb-6">
        <Projects
          results={infiteResults}
        />
      </div>
      <Button onClick={showMore} disabled={isLastPage}>
        Load More
      </Button>
    </>
  );
}

[dhayab]

Hi, you might want to use hits instead of results, as it returns the combined hits for all the pages: https://www.algolia.com/doc/api-reference/widgets/infinite-hits/react/#hook-api-hits.