Configure page is ignored, how to reset page to 0 ?

[alain ibrahim]

🐛 Current behavior

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 InfiniteHits

my tsx look like this in very simplified way

🔍 Steps to reproduce

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

Live reproduction

cannot have link now

💭 Expected behavior

i want to reset the page to 0 before new query is fetched , when i add a new facetfilter for example

or how to use resetPage() ?

thank you very much

Package version

react-instantsearch-core 7.3.0

Operating system

macos

Browser

reactnative 0.73.5

Code of Conduct

• I agree to follow this project's Code of Conduct

[Haroen Viaene]

I think you want useMenu().refine or useRefinementList().refine instead of recoding that behaviour with Configure 🤔

[alain ibrahim]

refine is not for just adding a string search ?

i use it in same screen because user can filter from inputText too

the refine signature is

const {query, refine} = useSearchBox({});
const refine: (value: string) => void

but my probleme is i can have same query ( like mcdo that user typed in textInput ) then he press food filter , so i need to run a query
with search = "mcdo" and facetFilters with food

[Haroen Viaene]

That's refine of the search box widget, every widget has its own refine function to do the refining action