Could we get a Promise from refine so we can await it?

[mmorris8]

The various refine functions currently return void. Could we get a promise from then so we can use the async/await pattern on them?

I'm working on a Google Map and when a location pin in clicked on I'm refining the location so just that one pin is shown and I render the doctors at that office location. I also want to show an InfoWindow, but I have to wait for the refine to conclude because that kicks off a render cycle and if I try to render the InfoWindow before that cycle it gets wiped.

I tried watching the status of useInstantSearch, but it never leaves the idle state on the refine call.

EDIT: I've been informed the API calls tripped off by refine are batched and put into a queue, so returning a promise isn't possible. So, make it possible to monitor the queue. The following code would work, but will have to wrap around whichever library is used by Algolia to make API requests. As written, the code wraps around the native window.fetch method.

let loadQueue = [];

export function queue(...promises) {
  promises.map(promise => {
    if (loadQueue.length === 0) {
      document.dispatchEvent(new CustomEvent("api-queue-start"));
    }
    loadQueue.push(promise);
    promise.then(() => {
      loadQueue = loadQueue.filter(p => p !== promise);
      if (loadQueue.length === 0) {
        document.dispatchEvent(new CustomEvent("api-queue-resolve"));
      }
    });
  });


  return loadQueue;
}

export function fetch(resource, init) {
  const response = window.fetch(resource, init);
  queue(response);
  return response;
}

With the above in place it becomes possible to retrieve the current api queue with the queue function and no arguments. Promise.all can then be used to await the resolution of the stack. If additional promises are put on the stack those two will be awaited as the value is passed by reference (as all objects in JavaScript are).

Refines throughout the system could then be changed to this pattern.

function refine(args) {
  //existing logic
  return Promise.all(queue())
}

And Algolia doesn't have to do this themselves - users could establish a wrapper.

[Haroenv]

The promise of search is not correlated with the place which refines as they are globally deduplicated and batched. Therefore it wouldn't be possible to do anything to keep track of the promise.

Why would a render cycle close the InfoWindow? Couldn't you keep it open until the user decides to close it? or do you want to close it on map move or other interaction with InstantSearch as well (in which case maybe you could use onStateChange, a middleware or similar to close the window possibly?)

[mmorris8]

The infowindow is closed because the maps layer gets re-rendered after the refine is called.

I've written code that deals with batched API calls and resolves a promise after the batch is cleared completely. I can look it up from my personal account and post here in a moment.

[Haroenv]

What you could also do is prevent a render until the queryId (you can use {results} = useInstantSearch() is different to the previous one, implying that refine is finished

[mmorris8]

No, one of my facets is "practice location" which allows the user to choose which doctor's office they are viewing. Many of these have 1 to 3 persons only so the odds of switching between two result sets with the same result count is very high.

[mmorris8]

Apparently my post from my other account was marked as spam. Moved the contents of the post into the first post of the discussion to show that yes, the request is possible.