feat(InstantSearch.js): add InfiniteHits async transfomItems

[baileypeter]

Adding a new sample illustrating how to asynchronously load data into a hit template using transformItems in a infiniteHits page.

[Haroenv]

Does this actually work? We don't wait for the result of transformItems, so I don't really understand how transformItems can be async, especially not a promise as it's here.

In almost all cases you don't want transformItems to be asynchronous, but if that is the case, you likely want to transform the search result, like this:

const searchClient = algoliasearch();
const search = searchClient.search;
searchClient.search = function newSearch(queries) {
  return searchClient.search(queries).then(response => {
    // transform response as you want, possibly async
    return response;
  });
}

[tkrugg]

It's an interesting use case. I saw Peter being asked this a lot.
It's typical when you'd like to enrich the returned records with data from another request, before printing it. In many cases, either customers do DOM manipulation or turn to backend search.
Are there any difficulties starting to support return type Promise, at least for Hits/InfiniteHits?

[Haroenv]

I don't think that's the right approach. You will end up with UI flashes very easily. The correct place for asynchronous logic is after the search has happened (maybe we can make that api simpler?), but definitely not in rendering. The fact that a timeout is called after the transformItems is done is mixing imperative and declarative UI, and definitely not a pattern we should use

[baileypeter]

Hi Haroen, How would you do it then ? Do you have a code sandbox that shows your recommended approach to load something asynchronously for each hit?

…

On Mon, 28 Feb 2022 at 12:05, Haroen Viaene ***@***.***> wrote: I don't think that's the right approach. You will end up with UI flashes very easily. The correct place for asynchronous logic is after the search has happened (maybe we can make that api simpler?), but definitely not in rendering. The fact that a timeout is called after the transformItems is done is mixing imperative and declarative UI, and definitely not a pattern we should use — Reply to this email directly, view it on GitHub <#359 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAM6BNPRMJECZLZDALEHVBLU5NJGPANCNFSM5OAWOMTQ> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>. You are receiving this because you authored the thread.Message ID: ***@***.***>

-- [image: Peter Bailey Avatar] [image: Algolia's logo] <https://algolia.com/> Peter Bailey - Technical Account Manager ***@***.*** Find our Documentation here <https://www.algolia.com/doc/> Create a Support ticket here <https://support.algolia.com/hc/en-us/requests/new.>

[Haroenv]

There's many ways, and it depends on what you'd do exactly, but here's an example that slowly transforms an attribute to uppercase: https://codesandbox.io/s/sad-morning-4wg6mk?file=/src/app.js