algolia / react-instantsearch

⚡️ Lightning-fast search for React and React Native applications, by Algolia.
https://www.algolia.com/doc/guides/building-search-ui/what-is-instantsearch/react/
MIT License
1.97k stars 386 forks source link

How do multiple <Configure /> handle merging parameters? #1490

Closed pheuter closed 6 years ago

pheuter commented 6 years ago

Under a single <InstantSearch> index I am taking advantage of rendering multiple <Configure /> widgets as part of custom components I created to apply API parameters not available through the default widgets and connectors. For example, here's a component that renders a select dropdown that sets optional filters:

class OptionalFilter extends React.Component {
  render() {
    const { attribute, ...restProps } = this.props;

    return (
      <>
        <ReactSelect
          value={this.state.currentValue}
          onChange={(value: any) => this.setState({ currentValue: value })}
        />
        <Configure
          optionalFilters={`${attribute}:${this.state.currentValue &&
            this.state.currentValue.value}`}
        />
      </>
    );
  }
}

My question is this: How does Algolia handle rendering multiple <Configure /> components? If the API parameters do not conflict, does it simply merge them together? If they do conflict, like if I rendered multiple OptionalFilter components from above, would it simply take a random one?

Haroenv commented 6 years ago

That's essentially the case, it's safe to have multiple Configure without any conflicts, but if there are multiple with the same key, or if any of the widgets already have this key (like the case with facetFilters) then it will be likely overriden by another. I'm not 100% sure which one will be chosen in that case, and it's something that we might change at a later point, but I think the component that gets mounted the latest will be the parameter that gets added to the URL.

You can sidestep this issue by using createConnector, but it's definitely less straightforward than the Configure widget.

In your use case I think you can (in case you have the issue of mounting multiple) look at the code of RefinementList and edit it to work for optional filtering; rather than regular filtering.

If you have more questions I'm happy to investigate proper solutions if you have other problems

samouss commented 6 years ago

See https://github.com/algolia/react-instantsearch/issues/693 & https://github.com/algolia/instantsearch.js/issues/5265

pheuter commented 6 years ago

Thanks, I’ll take a look at createConnector as a potential alternative. On Fri, Aug 10, 2018 at 4:52 AM Samuel Vaillant notifications@github.com wrote:

See algolia/react-instantsearch#693 https://github.com/algolia/react-instantsearch/issues/693 & algolia/instantsearch.js#5265 https://github.com/algolia/instantsearch.js/issues/5265

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/algolia/react-instantsearch/issues/1490#issuecomment-412020658, or mute the thread https://github.com/notifications/unsubscribe-auth/AAFqGlQSVWzgEMVyrnlCb1gETUHCeZZJks5uPUnggaJpZM4V2ovc .

samouss commented 6 years ago

Duplicate of https://github.com/algolia/instantsearch.js/issues/5265.