I bet the Algolia team wants to take a look at this!

React hooks State provided by Algolia not sync with hits after CRUD operation.

I have a create-react-app that performs CRUD operations to Firebase Cloud.

Each, such as adding, updating or delete a “client” triggers a Google Cloud Function that updates the records on Algolia.

I have:

    "algoliasearch": "^4.2.0",
    "react": "^16.13.0",
    "react-dom": "^16.13.0",
    "react-instantsearch-dom": "^6.4.0",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.4.0",
    "react-spring": "^8.0.27",
    "react-transition-group": "^4.3.0",

The problem:

When I delete a client:

the following actions happens:

1- The document is deleted from Cloud Firestore
2- The cloud functions triggers to update the record in Algolia

3- The cache is refreshed:

  React.useEffect(() => {
    const refresh = setTimeout(() => {
      if (props.algoliaCache) {
        console.log("boom algolia cached refreshed");

        props.setAlgoliaCache(false);
      }
    }, 3000);

    return () => clearTimeout(refresh);
  }, [props]);

BUT:

When I inspect with the React Dev tools
1- the hits are NOT updated, and what is that hooks State? Look at the picture, “Maria was deleted, should NOT be there”

Here’s the Algolia Dashboard after "Maria"s record was deleted.

Here’s my full Algolia Component where I refresh the cash:

import React from "react";
import algoliasearch from "algoliasearch";
import { InstantSearch } from "react-instantsearch-dom";

const searchClient = algoliasearch(
  process.env.REACT_APP_ALGOLIA_APIKEY,
  process.env.REACT_APP_ALGOLIA_SEARCH_ONLY_KEY
);

// ! Algolia indexes
// weg-alg-prod-index
// weg-alg-dev-index
const index =
  process.env.NODE_ENV === "production"
    ? "weg-alg-prod-index"
    : "weg-alg-dev-index";

const AlgoliaInstantSearch = (props) => {
  console.log("algolia cache: ", props.algoliaCache);
  React.useEffect(() => {
    const refresh = setTimeout(() => {
      if (props.algoliaCache) {
        console.log("boom algolia cached refreshed");

        props.setAlgoliaCache(false);
      }
    }, 3000);

    return () => clearTimeout(refresh);
  }, [props]);

  return (
    <InstantSearch
      indexName={index}
      searchClient={searchClient}
      refresh={props.algoliaCache}
    >
      {props.children}
    </InstantSearch>
  );
};
export default AlgoliaInstantSearch;

Please help out a fellow dev here, I love Algolia but it’s the first time I find myself in this situation, and I really don’t know where else to look for.

Thanks a lot!