reactjsalgoliareact-instantsearch

How to force refresh on react instant search dom in algolia or fetch updated data as soon as it finished?


I am integrating algolia with react-instant-search-dom in firebase. After i update a product, I want the updated result to be reflected on the front end but it is not working as expected. It sometimes works but sometimes not. I have used every possible way like using refresh param and clearCache method but none of them worked 100%. Could anyone of here can help me? This is my code snippet.

const handleEdit = (productData) => {
      updateProduct()
          .then((data) => {
            setTimeout(() => {
              setRefresh(true);
              setTimeout(() => {
                setRefresh(false);
              }, 100);
            }, 7000);
          })
          .catch((err) => {
            console.log("Error when saving new product data:", err.message);
          });
      })
  };
<InstantSearch
        indexName={AlgoliaSearchConfig.appIndexName}
        searchClient={searchClient}
        refresh={refresh}
  >

Solution

  • Reinitializing algoliasearch object or the searchClient seem to do the trick.

    Here is a sandbox to see it in action : https://codesandbox.io/s/strange-easley-2l0zi2?file=/src/App.js

    Now its not recommended (or best practise) to reinitialize an object on every key stroke while searching. What you can see in the sandbox is that, whenever we make an update or save data, we initialize a new algoliasearch object. Otherwise we don't on every keystroke (search).