Reset page number without resetting query

Hi there,
we are using react instant search with a custom range slider and are having a slight issue when resetting the the slider to its default values. We are also using this in conjunction with infinitehits.

When we use the slider to define a range and then scroll to say page 2, if I then reset the range, it will do this without hitch but the the fetch request that’s sent to algolia says that it is requesting page 2 and not page 0. I have attempted to override the page number in the Configure component but this has no effect.

The clear all widget does work but it removes the query too. Setting the ‘clearsQuery’ to false stops the button from operating.

08

Hi,

For your issue, the page not resetting when a filter changes, you’ll need to do it manually by switching InstantSearch into controlled mode. This is done by using searchState and onSearchStateChange properties:

Here’s an example of how it could be implemented in your application:

class YourApp extends React.Component {
  state = {
    searchState: {},
  };

  onSearchStateChange = searchState => {
    let page;
    
    // Your custom logic to calculate `page`
    // ...

    this.setState({
      searchState: {
        ...searchState,
        page,
      },
    });
  };

  render() {
    return (
      <InstantSearch
        searchClient={searchClient}
        indexName="your_index"
        searchState={this.state.searchState}
        onSearchStateChange={this.onSearchStateChange}
      >
        {/*widgets */}
      </InstantSearch>
    );
  }
}

brilliant. I thought this might be the case. is there a way to get the current searchstate object we are using so we can change that (and make sure we’re not missing anything)?

Yes, you receive the current searchState as a parameter to onSearchStateChange every time it is updated (including at InstantSearch initialization)

Here’s a slightly modified example where I log the searchState each time it changes:

class YourApp extends React.Component {
  state = {
    searchState: {},
  };

  onSearchStateChange = searchState => {
    console.log(searchState); // Current searchState
    
    this.setState({
      searchState: searchState // Copy the searchState to the component state (without changes)
    });
  };

  render() {
    return (
      <InstantSearch
        searchClient={searchClient}
        indexName="your_index"
        searchState={this.state.searchState}
        onSearchStateChange={this.onSearchStateChange}
      >
        {/*widgets */}
      </InstantSearch>
    );
  }
}

Fantastic, this has made my life very simple! Thank you Yannick :+1: