Updating instantsearch hits


i’m using angular instantsearch with algoliasearch.

  1. instantsearch displays hits
  2. user selects a hit to delete from the index
  3. the angular app deletes the hit using index.deleteObject()

Question: how do i get instantsearch to update hits in


Hi @richard1,

By default we recommend to use the Search Only API Key from the client to avoid any security issues. Those keys don’t have the rights to delete an object from an index. You have to provide (or create) a specific API key that will have the rights to do it. You can find more information about API Keys and how to generate them inside the documentation. Keep in mind that by exposing a key like this one to the client, a malicious user can erase the full content of the index.

Once you have the proper API Key you can use the deleteObject function on the JavaScript client. Now that the deletion of the hit has been requested you have to refresh the Angular InstantSearch instance. This step is required because by default all the requests are cached. Since the content of the index have changed we have to clear it. To do so you have to create a custom widget to get access to the instance and call the refresh method. Here is an example.

Note that every indexing operations inside Algolia are asynchronous. You may want to be sure that the record is correctly removed before calling the refresh method. To wait until the delete operation complete you can use the waitTask method on the client.

Hope that helps, let me know if you have questions.


All of this is clear, except how to implement it.

  1. I added the example Refresh component to my angular 7 app
  2. In ngModule, I added NgAisHitsModule, NgAisInstantSearchModule to imports
  3. In ngModule, I added NgAisInstantSearch to providers
  4. In ngModule, I added Refresh to declarations
  5. I added to my component like this:

< ais-instantsearch>
< ais-search-box>< /ais-search-box>
< ais-hits>…< /ais-hits>
< ais-refresh>< /ais-refresh>
< /ais-instantsearch>

  1. i get this error: ERROR TypeError: Cannot read property ‘render’ of undefined


Hi @richard1,

Could you make a reproducible example of the issue? It will help to better understand where the issue come from. We provide template to avoid you the boilerplate part. You can find it on CodeSandbox.


you forgot to call this.createWidget():
import { connectClearRefinements } from ‘instantsearch.js/es/connectors’;

selector: ‘app-ais-refresh’,
template: ``,
export class AisRefreshComponent extends BaseWidget {
@Inject(forwardRef(() => NgAisInstantSearch))
public instantSearchParent,
) {
// any connector be suitable
this.createWidget(connectClearRefinements, {
// instance options