React Algolia 搜索不返回任何匹配项

Question

I am trying to implement algolia in react hooks. I have created my index and assigned searchable attributes.

My searchable attributes are index.customerFirstName and index.customerLastName. I don't have a custom search ranking set.

An index record looks like this:

    {
  "indexData": {
    "customerFirstName": "Ivor",
    "customerLastName": "Cutler"
  },
  "objectID": "xxxxxxxxxxxxxxxxxxxxxx"
}

With useState I initialise variables:

const [ searchClient, setSearchClient ] = useState(null);
const [ search, setSearch ] = useState('');
const [ searchIndex, setSearchIndex ] = useState();

My useEffect waits to sign into firebase to get the records, then sets the search client to access the algolia index. If it is successful, it should populate the variable searchClient and this seems to work because when useEffect detects the change it logs the searchClient.

useEffect (() => {

        firebase.auth().onAuthStateChanged((user) => {

            if (user && !searchClient) { 

                setSearchClient(

                    algoliasearch(

                        process.env.REACT_APP_ALGOLIA_APP_ID,

                        process.env.REACT_APP_ALGOLIA_SEARCH_KEY

                    )

                )

            }

          });

          if (searchClient !== null && !searchIndex) {

              setSearchIndex(

                  searchClient.initIndex('Sessions')

              );

              console.log("SEARCH CLIENT", searchClient)

          }

          if (searchIndex && search) {

              console.log('SEARCH INDEX: ', searchIndex, search);

              getHits();

          }

    

    }, [search, searchClient, searchIndex, sessions, sessionData, showSessionData])

The function gethits() is called when the value of search (the query) changes:

const getHits = () => {

        searchIndex.search(

            search

        ).then(console.log)

    }

Yet my hits array is always empty. I have data in the index with the correct fields? What gives?

It is searching something because the search query appears in the hits JSON?

Answer 1

Ok so once I regenerated the API SEARCH KEY, this worked fine! For anybody who has already managed to index Algolia correctly and is using React Hooks, this method might offer more immediate flexibility than their InstantSearch React component, and I couldn't see anyone that had posted a basic React Hooks way of searching an algolia index.

There was no need to wait for firebase so this will work in the useEffect:

   if (!searchClient) { 

                setSearchClient(

                    algoliasearch(

                        process.env.REACT_APP_ALGOLIA_APP_ID,

                        process.env.REACT_APP_ALGOLIA_SEARCH_KEY

                    )

                )

            }