Using Searchkit/InstantSearch to render ElasticSearch Results in React

Question

I have a react-searchkit/instantsearch app that connects to a Flask app to send a query through text embeddings and then to ElasticSearch. The flask app then returns the JSON from ElasticSearch unedited. I am currently recieving the JSON properly from the Flask app and into my react app. I can't however display them properly with SearchKit/ InstantSearch.

Here is my code:

import React from "react";
import axios from "axios";
import {
  InstantSearch,
  SearchBox,
  Hits,
  RefinementList,
} from "react-instantsearch-dom";

const getSearchResults = async (query) => {
  const response = await axios.post("http://localhost:9090/_msearch", {
    query: {
      match: {
        text: query,
      },
    },
  });
  console.log(response.data.hits.hits)
  return response.data.hits.hits;
};

const hitView = ({ hit }) => {
  return (
    <div>
      {console.log("HIT: ", hit)}
      {/* <img src={hit.image} />
      <h2>{hit.title}</h2>
      <p>{hit.description}</p>
      <p>{hit.price}</p>
      <p>{hit.url}</p> */}
    </div>
  );
};

const App = () => (
  <InstantSearch
    indexName="cassandra-leaves-embedding"
    searchClient={{ search(requests) { return Promise.all(requests.map(getSearchResults)); } }}
  >

    <SearchBox />
    <Hits hitComponent={hitView} />
  </InstantSearch>
);

export default App;

I think the issue lies within searchClient

The function hitView isn't being called at all. I know this becuase console.log("HIT: ", hit) doesn't print anything to the console. The data is coming in properly through getSearchResults as console.log(response.data.hits.hits) works properly. I tried multiple different console.logs throughout different places and the only one that doesn't seem to work is hitView.

Using Searchkit/InstantSearch to render ElasticSearch Results in React

0 Answers0