search

algolia / vue-instantsearch

👀 Algolia components for building search UIs with Vue.js
https://www.algolia.com/doc/guides/building-search-ui/what-is-instantsearch/vue
MIT License
853 stars 157 forks source link

Initial view vue-instantsearch not updated after adding/updating records #1072

Closed eugenevk closed 3 years ago

eugenevk commented 3 years ago

Bug 🐞 In my project I am using VueJS 3.2.20 (Composition API), Vue CLI 4.5.14, plus Firebase, plus Algolia, and vue-instantsearch. I noticed that when I launch my app and go to my instantsearch page, the records initially shown are according to what is in the Algolia index. Example of the search page in my app:

image

In Algolia:

image

If I now add a record via my app, it gets added to Algolia correctly:

image

but when I navigate back to the search page, the instantsearch view doesn't get updated in my app:

image

But I can search for the new record correctly:

image

I need to refresh my browser to get the initial instantsearch view updated to show all available records:

image

It looks like the records for the initial instantsearch view are cached or so. How can I get this updated in real-time?

Haroenv commented 3 years ago

the search results are indeed cached for performance (and to save you costs) by the search client. You can either disable the cache in algoliasearch: https://www.algolia.com/doc/api-client/advanced/configure-the-client/javascript/?client=javascript#cache-on-requests-and-responses

Or you can refresh the search cache periodically, or based on a button. For that you can use instantSearchInstance.refresh() (the InstantSearch instance is available to be injected to any child of the ais-instant-search component)

eugenevk commented 3 years ago

Thanks @Haroenv, that clarifies. You can close this ticket.

Haroenv commented 3 years ago

https://www.algolia.com/doc/guides/building-search-ui/going-further/improve-performance/vue/#caching is the refresh guide for Vue InstantSearch by the way :)