InstantSearch Hits UX Component not Populating

[mcgodes]

Description

Trying to set up a Typesense server to my website using react-instantsearch and typesense-instantsearch-adapter. I believe that my <Hits> component is not being successfully populated, even though I'm getting JSON responses from my server.

Steps to reproduce

Here is my search UI code:

import React from 'react'
import {
  Configure, Highlight, Hits, InstantSearch, Pagination, SearchBox
} from 'react-instantsearch-dom'
import TypesenseInstantSearchAdapter from "typesense-instantsearch-adapter"
import 'instantsearch.css/themes/satellite.css'

const typesenseInstantSearchAdapter = new TypesenseInstantSearchAdapter({
  server: {
    apiKey: "<MY_KEY>",
    nodes: [
      {
        host: "<MY-EC2>.compute-1.amazonaws.com",
        port: "8108",
        path: '',
        protocol: "http",
      },
    ],
    cacheSearchResultsForSeconds: 2 * 60,
  },
  additionalSearchParameters: {
    query_by: "name,domain,description,keywords,industries",
  },
})

const typesenseSearchClient = typesenseInstantSearchAdapter.searchClient

export function CompanySearchPage() {
  return (
    <div className="ais-InstantSearch">
      <h1>React InstantSearch Test</h1>
      <InstantSearch indexName="companies" searchClient={typesenseSearchClient}>
        <Configure hitsPerPage={8} />

        <div className="search-panel">
          <SearchBox />
          <Hits hitComponent={CompanySearchHit} />
          <Pagination />
        </div>
      </InstantSearch>
    </div>
  )
}

function CompanySearchHit(props) {
  return (
    <p>Hello World!!!!</p>
  )
}

I can see that requests are being made to my typesense server via the Chrome debugger tool:

Example Response from Typesense server to Chrome, seems like this is valid to me:

{"results":[{"facet_counts":[],"found":139,"hits":[{"document":{"business_model":"None","country":"United States","customer_type":"None","description": "Blah blah"
....
,"highlights":[{"field":"name","matched_tokens":["Prep"],"snippet":"Intrepid College <mark>Prep</mark>","value":"Intrepid College <mark>Prep</mark>"},
...
,"out_of":92179,"page":1,"request_params":{"collection_name":"companies","per_page":8,"q":"prelp"},"search_cutoff":false,"search_time_ms":4}]}

Expected Behavior

I'd expect the Hits UX component to receive the typesense server results and to appropriately render the hitComponent, even if its just a dumb placeholder for now. I hope that is the expected behavior, as all the tutorials and demos don't show any additional connection behavior.

Actual Behavior

Unfortunately, my Hits component isn't receiving any updates and there is therefore nothing rendering. When I look at the DOM elements, there is just an empty ai-Hits list. Basically, not sure how to hook up the API responses to the Hits element successfully. I was kinda assuming everything would just work! Please lmk if I'm doing something stupid!

Metadata

Typesense Version: typesense-server-0.23.1-1.x86_64.rpm

OS: Amazon Linux v2

    "@babel/runtime": "^7.19.0",
    "algoliasearch": "^4.14.2",
...
    "instantsearch.css": "^7.4.5",
...
    "react-instantsearch-dom": "6.32.1",
...
    "typesense": "^1.4.0",
    "typesense-instantsearch-adapter": "^2.4.1",

Happy to provide any additional info that would be helpful! Please lmk if anyone has any thoughts/suggestions!! Much appreciated!

[jasonbosco]

I don't see anything immediately obvious that's wrong with your code snippet.

But here's one react-instantsearch demo: https://github.com/typesense/showcase-nextjs-typesense-ecommerce-store

Could you try running that locally to see if the issue persists there?

[mcgodes]

Thanks for the engagement, will try out the demo!

[mcgodes]

The demo worked for me...so I'll work backwards to see what, if anything, I can figure out. Thanks!