How to pass get the number of hits in middleware onStageChange?

[garyhuangdev]

Hi everyone!

How can I get the number of hits in the middleware onStageChange function?

What I try to do:
When filter state changes, dispatch a custom event from document object, the event data should include nbHits.

I am using InstantSearch v7. I use middleware to hook into the filter state update process by using onStateChange. But it seems I am unable to access the nbHits and send it via the onStateChange.

// middlewareFn is the middleware function I defined to parse filter state and convert into desired data structure
const middlewareFn = () => {
    const handleStateChange = ({ uiState }: { uiState: UiState }) => {
        const parsedEventInfo = searchEventParser(uiState[indexName], nbHits)
        dispatchCustomEvent({
          eventName,
          eventData: parsedEventInfo,
        })
      }

      return {
        onStateChange,
        subscribe() {},
        unsubscribe() {},
      }
}

const middlewareFn = useMemo(
    ... some custom logic to retrieve extra data, but unable to access nbHits
)

<CustomEventMiddleware middleware={middlewareFn} />

Is it possible to get nbHits in the implementation of middlewareFn?

[Haroenv]

When you do the filter event, do you want the number of hits after the filter is completed?

[garyhuangdev]

Hi @Haroenv, yes exactly.

[Haroenv]

This won't be very straightforward as the ui state change happens before the network request. You probably want to add a listener to result inside subscribe to emit your actual event

[garyhuangdev]

@Haroenv Thanks for the reply. It seems I can't find how to add result event listener in the instant search docs. May I ask where can I find an example of adding a listener? Or is there any other packages I need to enable it?

[Haroenv]

hmm I was wrong and there's no result event indeed, sorry. You can listen on instantSearchInstance.render which will have the results available in search.mainIndex.getResults. Sorry for the detour you need to get this functionality but our builtin events don't need the result to send the event.

[garyhuangdev]

Thank you @Haroenv, works perfectly for my case!

[Haroenv]

I just realise that I actually meant search.on('render', cb), but I guess you inferred that. Glad you have a solution now!