How to refresh vue-instantsearch results programmatically?

[jbp35]

I need to refresh programmatically the results of ais-instant-search when an item is added to the database by the user.

I tried to use algoliaSearchClient.clearCache(), but it does not seems to have any effect on the results already loaded.

Is there any way to achieve this ?

[Haroenv]

You can use the refresh function on InstantSearch, as just clearing the cache doesn't cause a new search. This is documented here: https://www.algolia.com/doc/guides/building-search-ui/going-further/improve-performance/vue/#refresh-the-cache-triggered-by-a-user-action

[Haroenv]

Do you have a reproduction of this in a repo somewhere?

[jbp35]

Do you have a reproduction of this in a repo somewhere?

While preparing a repo, I have been able to narrow down the issue to the fact that I am using ais-infinite-hits component, maybe not the way it is expected? Here is my original code which is not refreshing:

      <ais-infinite-hits>
        <ais-hits>
          <template v-slot:item="{ item, sendEvent }">
            <LayerCard :layerId="item.objectID" :item="item" @addAssetClicked="addAssetToProject(item, sendEvent)" />
          </template>
        </ais-hits>

        <template v-slot:loadMore="{ isLastPage, refineNext }">
          <div class="flex justify-center q-my-lg">
            <q-btn v-if="!isLastPage" @click="refineNext" outline>
              {{ $t('showMoreResult') }}
            </q-btn>
          </div>
        </template>
      </ais-infinite-hits>

If I wrap my cards in an ais-hits component, the results refresh as expected :

      <ais-infinite-hits>
        <ais-hits>
          <template v-slot:item="{ item, sendEvent }">
            <LayerCard :layerId="item.objectID" :item="item" @addAssetClicked="addAssetToProject(item, sendEvent)" />
          </template>
        </ais-hits>

        <template v-slot:loadMore="{ isLastPage, refineNext }">
          <div class="flex justify-center q-my-lg">
            <q-btn v-if="!isLastPage" @click="refineNext" outline>
              {{ $t('showMoreResult') }}
            </q-btn>
          </div>
        </template>
      </ais-infinite-hits>

However, I thought that <ais-infinite-hits> replaces <ais-hits> ?

[Haroenv]

Ah yes I forgot about this edge case. That depends on which behaviour you want for refresh. infinite hits has its own cache as only one page at a time is requested. What you can do is

• set the page to 0
• clear the infinite hits cache (you need to make a custom cache for that, or clear the sessionStorage used)
• refresh

Refreshing and still displaying the same pages isn't possible I think

[jbp35]

Ah yes I forgot about this edge case. That depends on which behaviour you want for refresh. infinite hits has its own cache as only one page at a time is requested. What you can do is

• set the page to 0
• clear the infinite hits cache (you need to make a custom cache for that, or clear the sessionStorage used)
• refresh

Refreshing and still displaying the same pages isn't possible I think

Thank you ! I am trying to figure out how to achieve the different steps you suggested above:

• How to set page to 0 ? I do not see any "page" prop on ais-infinite-hits component.
• Use a custom cache. Do you have an example of a "good" custom cache implementation ? I am fine with the one used by default. Is it possible to use it as a custom cache?
• When do you say Refesh, do you mean use the refresh component described here https://www.algolia.com/doc/guides/building-search-ui/going-further/improve-performance/vue/#refresh-the-cache-triggered-by-a-user-action or some other function?

[Haroenv]

• to reset the page to 0, you can use instantsearchInstance.setUiState(state => Object.fromEntries(Object.entries(state).map(([index, value]) => ([index, {value, page: 0}])))) within that same reset component (if you do this you don't actually need refresh anymore, just clearCache before this would work too.
• a custom cache can be based on the cache we have: https://github.com/algolia/instantsearch/blob/master/packages/instantsearch.js/src/lib/infiniteHitsCache/sessionStorage.ts or https://github.com/algolia/instantsearch/blob/master/packages/instantsearch.js/src/connectors/infinite-hits/connectInfiniteHits.ts#L186-L202
• yes, the refresh component