Leveraging PerformanceObserver to delay code execution until after InstantSearch Query finishes.

[mmorris8]

So last month I posted a request for getting refine methods to return a promise so we can delay code execution until after the resulting query runs. Well, there turns out to be a way to do this without changing Instantsearch. Let's start with the promise executor

const algoliaFetch = resolve => {
  new PerformanceObserver(list => {
    for (const entry of list.getEntries()) {
      if (entry.initiatorType === "xmlhttprequest" && entry.name.includes('algolia')) {
        resolve()
      }
    }
  }).observe({entryTypes: ["resource"]})
}

The Performance Observer watches various requests between client and server and these events fire off at the conclusion of the event with timing information about how long it took. We are looking for XMLHttpRequests fired off by Algolia, and when we see this we resolve. This can be expanded on to look for a specific request to conclude since the entry name holds the entire URL queried along with the GET params.

So I have a virtual sort facet that is watching changes to the User Physical Location, which will occur when they choose to provide a zip code or have their device transmit their GPS coords. The relevant section of it's code with the above is this

if (userLocation) {      
      if (currentRefinement === indexName) {
        setLoading(true)
        refine(`${indexName}_distance`)
        new Promise(algoliaFetch).then(() => {
          refresh()
          setLoading(false)
        })
      }
    } else {
      if (currentRefinement === `${indexName}_distance`) {
        setLoading(true)
        refine(indexName)
        new Promise(algoliaFetch).then(() => {
          refresh()
          setLoading(false)
        })
      }      
    }

I probably can remove the setLoading call, which is just a useState flag because this component never draws anything to the DOM. The refresh method is off of useInstantSearch(). Anyway, the above pattern should help anyone else in this situation of needing to wait until a refinement executes.

Note - the promise will resolve after the first Algolia query subsequent to the refine call concludes. If a batch is kicked off this could be a problem depending on what the code needs to do and why it was waiting in the first place.

[Haroenv]

If you just wanted events after any query happened, you could also create a proxy of the algoliasearch client and listen to the search calls, right? but this looks robust

[mmorris8]

I didn't think to do that - I'm still learning the architecture of the system - but yeah, that should indeed be possible and perhaps more concise than the above, though the above would be more portable between Algolia plugin projects. Also, this pattern can be used for any fetch or XMLHTTPRequest - it's a pretty potent tool I bumped into this morning.