Execute middleware on initial render

[andreyvolokitin]

onStateChange doesn't (and probably shouldn't) execute on initial render, but I need to hook up custom logic on every render, including initial. Am I missing something or middleware isn't the right thing to use?

[Haroenv]

Before we can help further, what logic do you want to put in the event?

[andreyvolokitin]

Updating external DOM with hits metadata (nbHits) for multiple indexes. I figured out I probably could execute the same function onStateChange and after initial rendering, but didn't yet find a precise place for this

[Haroenv]

this may work better as a widget, you can implement it like this for example:

type SearchResultsWidgetDescription = {
  $$type: 'mynamespace.searchResults';
  renderState: {
    results: SearchResults<any>;
    scopedResults: ScopedResult[];
  };
};

const connectSearchResults: Connector<SearchResultsWidgetDescription, never> = (
  renderFn
) => {
  return (widgetParams) => {
    return {
      $$type: 'mynamespace.searchResults',
      getWidgetRenderState({ results, scopedResults }) {
        const totalNbHits = scopedResults.reduce(
          (acc, { results: { nbHits } }) => acc + nbHits,
          0
        );

        return {
          results: results!,
          scopedResults,
          totalNbHits,
          widgetParams,
        };
      },
      render(renderOptions) {
        renderFn(
          {
            ...this.getWidgetRenderState!(renderOptions),
            instantSearchInstance: renderOptions.instantSearchInstance,
          },
          false
        );
      },
      dispose() {},
    };
  };
};

const allStats = connectSearchResults(({ totalNbHits }) => {
  document.querySelector('.mycustomstats')!.innerText = totalNbHits;
});

search.addWidgets([allStats()]);

[andreyvolokitin]

Yeah, didn't want to come as far as to completely custom widget (but it turned out to be not so hard). Thank you!