i'm using InstantSearch Configure and useInfiniteHits to fetch data from algolia
my data in algolia hits are like this
{ 'name': 'adidas', 'univers':'sport' },
{ 'name': 'kfc', 'univers':'food' },
{ 'name': 'macdonald', 'univers':'food' },
{ 'name': 'pathé', 'univers':'cinema' },
my probleme is i cannot reset search page to 0 no matter what i try, or maybe clear all the cache ?
for example i have 400 data, i show them all in the flatlist with infinityHits pagination and showMore, hitsPerPage={50} is set so my page become equal to 8 now,
now the user want to filter data and show only univers:food for example ( and there is only 20 hits of food),
i look on the HTTP query , page still set to 8 but facefilter is changed. so result is null because pagination window start at page 8 instead of 0
HOW TO RESET THIS DAMN PAGE please ?
i even try to useMemo to force unmount Configure and
my tsx look like this in very simplified way
import {InstantSearch} from 'react-instantsearch-core';
import {Configure} from 'react-instantsearch-core';
import {useInfiniteHits} from 'react-instantsearch-core';
const MySearch = ( ) =>{
const [algoliaRefreshKey, setAlgoliaRefreshKey] = useState(0);
const [filtersSelected, setFiltersSelected] = useState<string[]>([]);
const selectFilter = (name: string) => {
if (filtersSelected.includes(name)) {
setFiltersSelected(filtersSelected.filter(filter => { return filter !== name; }));
} else {
setFiltersSelected(filtersSelected.concat(name));
}
setAlgoliaRefreshKey(algoliaRefreshKey + 1);
};
const memoizedAlgoliaSearchConfigure = useMemo(() => {
return (
<Configure
facetFilters={[
filtersSelected.map(item => {
return `univers:${item}`;
}),
]}
page={0}
hitsPerPage={50}
key={algoliaRefreshKey}
/>
);
}, [algoliaRefreshKey, filtersSelected]);
const memoizedInfiniteHits = useMemo(() => {
return (
<InfiniteHits />
);
}, [algoliaRefreshKey, filtersSelected]);
return (
<InstantSearch searchClient={searchClient} indexName={indexName}>
{memoizedAlgoliaSearchConfigure}
<ScrollView horizontal>
<Button onPress={()=>selectFilter('food')} />
<Button onPress={()=>selectFilter('sport')} />
<Button onPress={()=>selectFilter('shoping')} />
<Button onPress={()=>selectFilter('cinema')} />
</ScrollView>
{memoizedInfiniteHits}
</InstantSearch>
)
}
const InfiniteHits = ()=>{
const {hits, isLastPage, showMore} = useInfiniteHits( );
return (
<FlatList data={hits} ...
onEndReached={() => { if (!isLastPage) { showMore(); }
}}/>
)
}
```