React-instantsearch: Infinite Scroll + Search, not working, calling refine only triggers refineNext.

[itsmichaeldiego]

I am using the InfiniteHits component with connectInfiniteHits helper, from react-instantsearch-dom to create an infinite scroll behavior.

In my case, I want to have infinite scroll but also the ability to search at the same time. I was able to set up infinite scroll easily, following this guide, but when I try to call refine() method, in my component, it doesn't do a refine on the original search, but only triggers refineNext, which fetches an X amount of components based on hitsPerPage attribute.

I think my code is pretty straight-forward, here is the code snippet:

class ItemsHits extends React.PureComponent {
  constructor(props) {
    super(props);
    this.sentinel = null;
    this.handleChange = debounce(this.handleChange.bind(this), 500);
    this.onSentinelIntersection = this.onSentinelIntersection.bind(this);
  }

  componentDidMount() {
    this.intersectionObserver = new IntersectionObserver(
      this.onSentinelIntersection
    );
    this.intersectionObserver.observe(this.sentinel);
  }

  componentWillUnmount() {
    this.intersectionObserver.disconnect();
  }

  onSentinelIntersection(entries) {
    const { hasMore, refineNext } = this.props;

    entries.forEach(entry => {
      if (entry.isIntersecting && hasMore) {
        refineNext();
      }
    });
  }

  handleChange(ev, data) {
    // problem here, refine triggers refineNext instead of a normal refine
    this.props.refine(data.value);
  }

  render() {
    const { hits } = this.props;
    return (
      <React.Fragment>
        <Search>
          <SearchInput
            icon="search"
            placeholder="Search by item name..."
            onChange={this.handleChange}
          />
        </Search>
        <Items>
          {hits.map(hit => (
            <Item key={hit.id} hit={hit} />
          ))}
        </Items>
        <div ref={c => { this.sentinel = c; }} />
      </React.Fragment>
    );
  }
}

export default connectInfiniteHits(ItemsHits);

Expected behavior 💭

Refining in connectInfiniteHits should do a refine instead of refineNext, like they do in connectHits.

GIF

Environment:

• macOS Mojave 10.14.6
• Chrome 76.0.3809.100
• Version react-instantsearch-dom: ^5.5.0

Additional context

I want users to be able to search, but sometimes this search can bring many items, therefore I still want to have the ability to do infinite scroll, I believe these two features should be able to live together.

Maybe someone who has implemented this on the past wants to share their experience?

[samouss]

From what I've understood you want to be able to use a SearchBox within your InfiniteHits, is that correct? The refine behaviour is the expected one. The function exposed by the connector InfiniteHits only manage the page not the query. If you want to alter the query you have to use the SearchBox connector.

Here is an example with the code sample provided (updated). If I misunderstood the issue, please provide a bit more context. It would help to better understand the problem and possible solutions.

[itsmichaeldiego]

@samouss You're right, it works perfectly with your example, thank you so much. I am closing the issue now.

This brings me to the question though, what is the difference between refine and refineNext then?

Thanks in advance

[samouss]

Good question, it's an alias. They are equivalent. refine is here for legacy reason. We've introduced refinePrevious so we've renamed refine to refineNext without removing the old behaviour to avoid breaking change. If I'm correct we don't document it anymore inside the doc. We probably should add a warning though. Thanks for the question!

[itsmichaeldiego]

@samouss That makes total sense, thank you so much, I will keep using refineNext instead