React-instantsearch: [Question] Migrate from createConnector to connectStateResults

[Kikobeats]

Hello, folks

I'm migrating my old windtoday.co code to the new fancy react-instantsearch v5 😄

Just I found something that not sure how I can resolve.

I have a component that actually it's using two connectors:
https://github.com/windtoday/windtoday-app/blob/master/components/Hits/InfiniteHits.js#L115

Because one of the connectors are createConnector and it's deprecated, I want to migrate it using connectStateResults in order to avoid the warning message that currently it appears on dev tools:

react-instantsearch: it seems that you are using the `createConnector` api only to access the `searchState` and the `searchResults` through `getProvidedProps`.We are now provided a dedicated API the `connectStateResults` connector that you should use instead. The `createConnector` API will be soon deprecated and will break in future next major versions.

See more at https://community.algolia.com/react-instantsearch/connectors/connectStateResults.html
and https://community.algolia.com/react-instantsearch/guide/Conditional_display.html

But the API of this new connector is not exactly the same than createConnector, so I tried different approach but didn't found how to do it.

Any help is welcome 😄

[Haroenv]

const connectConditionalResults = connectStateResults(
  function ConditionalResults({ searchState, searchResults}) {
    const { query } = searchState;
    const results = searchResults.results || {};
    const { nbHits = 0 } = results;
    const hasResults = nbHits > 0;
    return { query, hasResults };
  }
);

Something like this should work no? I didn't test it so might miss something obvious, but I think this should work

[samouss]

Hi @Kikobeats, the solution that @Haroenv provide is almost correct but you will need to wrap the the call to the function in a HOC. You can find a working example on CodeSandbox.

const connectConditionalResults = WrappedComponent => {
  const StateResultsComponent = connectStateResults(
    ({ props, searchState, searchResults }) => {
      const { query } = searchState;
      const nbHits = (searchResults && searchResults.nbHits) || 0;
      const hasResults = nbHits > 0;

      return (
        <WrappedComponent {...props} query={query} hasResults={hasResults} />
      );
    }
  );

  return props => <StateResultsComponent {...props} />;
};

const ConditionalResults = connectConditionalResults(MyComponent);

[Haroenv]

Another option is to put that logic in your component itself, in which case you don't need to wrap

[samouss]

Yes @Haroenv is completely right, I implemented as a HoC since you can completely reuse the logic of such component. Otherwise if you only need it in one place you don't need to create a connector and you can do the condition in the render of the component.

[Kikobeats]

Thanks for the suggestions, I think @samouss works like a charm 🎉