useInfiniteHits react-instantsearch-core how to simply resetpage?

20 views Asked by At

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();  }
    }}/>
  )
}

```
0

There are 0 answers

Related Questions in REACT-INSTANTSEARCH-CORE