Real-time deletion of a record with react-instantsearch

Hello, guys! I am trying to do a simple admin panel and for that purpose I am using react-instantsearch with algolia and firebase cloud firestore. I imported the data in Algolia and everything is fine, but when I try to delete a record nothing happens in my <Hits> until I refresh the page. I have a cloud function that “listents” for deleting and is removing the object in algolia. And when I click on the delete button I simply remove the record from the cloud firestore Isn’t that supposed to remove the firestore record and after that remove the Algolia record and update my UI in the admin panel. Is there something I am missing?

Hi @kristiankamenov1, welcome to the forum!

Presumable the results on your page are populated by an API call to Algolia. Therefore, the data / UI will not be automatically refreshed until another API call is made to retrieve the new results after the deletion has been complete. In other words, React Instant Search is not constantly polling the Algolia API looking for changes.

Therefore, in order to update the UI when you delete a record, it would be necessary to fire another search query. Another way of handling this would be perhaps to just remove that particular hit from the UI when the delete button is clicked. When a user begins to search or refine the search again, a new search call will be made in any case, and the updated results set will be used.

Hope this helps! Please let us know if something is still unclear.

I am not doing any kind of query. I guess instantsearch is doing it under the hood. Maybe a possible approach here will be to get rid of instantsearch and handle the queries manually.

Also I am paginating the data and if a solution would be to remove the UI hit when I go a page up and then go back on the item removed page the item will be there. It will not be removed

Also I did this:

const handleRejectApplication = (objectID) => {
  firebase.application(objectID).delete().then(() => {
    index.search({
      query: '',
      hitsPerPage: 8,
    },
    (err, { hits } = {}) => {
      if (err) throw err;

      console.log(hits);
    });
  });
};

and it is still returning the old hits (the removed hit is still in the response, but it shouldn’t be there)

Hi @kristiankamenov1,

Can you provide us a codesandbox to demonstrate the issue so that we can help you troubleshoot?

We have a React Instantsearch Starter Template to help you get started.

https://codesandbox.io/s/elated-kapitsa-peqqj have a look at the handleRejectApplication function. So basically when you click on the NO button on each item it deletes the record in the firebase but it is not updating the UI. In order to update the UI you need to refresh the page. Thanks in advance!

For performance reasons, whenever users type a query, it’s cached so we don’t need to trigger another network request. This means that if the index data changed meanwhile, the old data will be returned.

You can bail out of this behavior. The guide about Caching explains how to get rid of cached results with React InstantSearch.

Okay but in my example in codesandbox above. I set refresh always true on <InstantSearch> and it is not working (not getting fresh information from the firebase)

Hi there,

If you look at the code above, InstantSearch widget clears cache WHEN refresh prop has changed to true.

It means you need to

  • set refresh as true when you want to clear cache
  • immediately set it as false again, so that later when you set it as true, it’d work.

If you see this example, it shows how to set it true and again false.

  componentDidMount() {
    this.interval = setInterval(
      () =>
        this.setState({ refresh: true }, () => {
          this.setState({ refresh: false });
        }),
      5000
    );
  }