Does InfiniteHits have a maximum limit of 200 hits?

[AmarHuda1]

I have a search feature on my website that uses Infinite Scroll for pagination.
I have set hitsPerPage={20}, and certain keywords can generate over 300 article results and this mean there will be 16+ pages that can be loaded.
Everything works fine from page:1 to 10, loading 200 hits. However, the issue arises when Infinite Scroll reaches page:11. Instead of adding 20 more hits to the existing 200 hits, it replaces the last 20 hits. Since I use Infinite Scroll, this behavior will be triggering pagination until the last page, as I'm still in the viewport that causing Infinite Scroll to run.

[Haroenv]

No, the limit is limited to paginationLimitedTo (docs: https://www.algolia.com/doc/api-reference/api-parameters/paginationLimitedTo/), which has a maximum of 20000.

As you can see in the storybook, this example has 64 hits per page and goes up to page 16, as the default value of paginationLimitedTo is 1000 https://instantsearchjs.netlify.app/stories/js/?path=/story/results-infinitehits--default

Do you have a reproduction of this behaviour?

[AmarHuda1]

I wonder if createInfiniteHitsSessionStorageCache() is have an issue in caching, since when i remove this from my component parameter all the results can be rendered properly. here is the code that i use:

SearchHits.tsx

`const SearchHits = (props: any) => {
const { hits, isLastPage, showMore, results } = useInfiniteHits(props);
const { status } = useInstantSearch();

const updatedHits = transformSearchHits(hits);
const sentinelRef = useRef(null);
useEffect(() => {
    if (sentinelRef.current !== null) {
        const observer = new IntersectionObserver((entries) => {
            entries.forEach((entry) => {
                if (entry.isIntersecting && !isLastPage && !(status === 'loading' || status === 'stalled')) {
                    showMore();
                }
            });
        });

        observer.observe(sentinelRef.current);

        return () => {
            observer.disconnect();
        };
    }
}, [ hits, isLastPage, showMore, status ]);

if (results && !results.__isArtificial && results.nbHits === 0) {
    return (
        <NoResults message={'We can’t find anything based on your search keywords'} />
    );
}

if (status === 'loading') {
    console.log('[LOG] Current updated Hits ', updatedHits)
}

// @ts-ignore
// @ts-ignore
return (
    <>
        <Cards
            type="variable"
            className="gy-4"
            card="col-md-6 col-lg-3"
            stackedMobile
            items={updatedHits} />
        <button
            onClick={showMore}
            aria-hidden="true">Load More</button>
    </>
);

};`

searchIndex.tsx.(here is where i load the searchHits, when using createInfiniteHitsSessionStorageCache the cache can only updated until page 9)
<SearchHits cache={createInfiniteHitsSessionStorageCache()} />

[Haroenv]

sessionStorage does have a limit of a couple MB, maybe you're hitting that?

[AmarHuda1]

What the maximum size?
Is there work around for this cache, or is there away to store the cache for just certain hits and let the rest of hits not stored?

[Haroenv]

seems like it's limited to 5MiB (https://developer.mozilla.org/en-US/docs/Web/API/Storage_API/Storage_quotas_and_eviction_criteria#). Maybe with large objects you're hitting that quicker than others (I haven't seen any other reports of this). What you could do as solution is make a custom cache that uses indexedDb and keep track of session expiry manually as well

[AmarHuda1]

Hmmm interesting, thank for the advice man will try implement it