Update results with <InfiniteHits> when filters have changed

Hi there!

Use case

I’d like to be able to dynamically change search filters whilst using <InfiniteHits>

Setup

I’ve created a simple environment which can be found here:

It consists of a few buttons which store the selected year in state.

This state is used to construct a string which is passed to <Configure>.

Results are displayed with <InfiniteHits>

const { year } = this.state
const filters = year ? `year:${year}` : undefined;

...

<InstantSearch
  appId="latency"
  apiKey="6be0576ff61c053d5f9a3225e2a90f76"
  indexName="movies"
>
  <Configure filters={filters} hitsPerPage={5} />
  <InfiniteHits hitComponent={Movie} />
</InstantSearch>

...

Current issue

Changing the year works as expected. However, as soon as ‘load more’ is pressed (which loads more in items correctly) changing the year yields no change.

Expected behaviour

Changing the filter would always display the first page of items.

What would be the idiomatic way to achieve what I’m after?

Any advice appreciated!

Hi @robin.pyon,

Our widgets automatically reset the page each time it is refined (e.g: the query change, click on a facet, etc…). But the Configure widget does not reset the page. Its main usage is for static values (like hitsPerPage). You can use it for dynamic values (see example) but your use case is easier to solve with a custom Menu built with the connectors. This API lets you create a custom widget without having to implement all the logic, only the view. You can leverage the connector connectMenu to create a Menu that use your list of years to set the refinement. Here is an example that shows how to implement it.

const Year = connectMenu(({ refine }) => (
  <fieldset>
    <legend>Year</legend>
    <button onClick={() => refine("")}>All</button>
    <button onClick={() => refine("2011")}>2011</button>
    <button onClick={() => refine("2012")}>2012</button>
    <button onClick={() => refine("2013")}>2013</button>
    <button onClick={() => refine("2014")}>2014</button>
  </fieldset>
));

Hope that helps, let me know if you have questions.

2 Likes

Thank you @samuel.vaillant, that did the trick!