#community-help

Connecting React Instant Search with Typesense Adapter

TLDR KARTHICK sought help with an error when using Typesense Adapter for React Instant Search. Jason advised substituting import statements. After uninstalling the react-instantsearch-dom package, KARTHICK resolved the issue.

6mo

Join the chat

May 25, 2023 (6 months ago)

Photo of md5-9885c2d5db3a85d24bc9c11809bcaf50

KARTHICK

10:54 AM

• Is this is the only way to connect.
• If we need React instant search web hook widget we need to connect through algolia search alone.

import algoliasearch from 'algoliasearch/lite';
import { InstantSearch, SearchBox } from 'react-instantsearch-hooks-web';

const searchClient = algoliasearch('undefined', 'undefined');

function App() {
  return (
    <InstantSearch searchClient={searchClient} indexName="instant_search">
      <SearchBox />
    </InstantSearch>
  );
}

• Right now in using typesense-instantsearch-adapter with react instant search dom.
• If any one know solution for this please reply in the thread.
Kishore Nallan Jason

Photo of md5-8813087cccc512313602b6d9f9ece19f

Jason

03:34 PM

You don’t have to use the algoliasearch client.

03:35

Jason

03:35 PM

The instructions for react-instantsearch-dom are the same as for react instantsearch hooks: https://github.com/typesense/typesense-instantsearch-adapter#with-react-instantsearch

03:35

Jason

03:35 PM

You only have to change the import statement

May 26, 2023 (6 months ago)

KARTHICK

04:21 AM

When i change the import statement from

import { InstantSearch } from 'react-instantsearch-dom';
to
import { InstantSearch } from 'react-instantsearch-hooks-web';

Im getting this error

04:23

KARTHICK

04:23 AM

Please guide me how to resolve this error and make work things properly. Jason Kishore Nallan

Jason

04:27 AM

That doesn’t look like an error related to Typesense… And I’m not familiar enough with react instantsearch to be able to help. I would recommend posting on Stackoverflow or open an issue in the react instantsearch repo

KARTHICK

04:34 AM

const typesenseInstantsearchAdapter = new TypesenseInstantSearchAdapter({
  server: typesenseSearchClient.server,
  apiKey: typesenseSearchClient.apiKey,
  additionalHeaders: {
    'X-Custom-Header': 'Value'
  }
});

const App = () => {
  return (
    <InstantSearch
      indexName="your_typesense_index_name"
      searchClient={typesenseInstantsearchAdapter}
    >
      <SearchBox />
      <Hits />
    </InstantSearch>
  );
};

04:34

KARTHICK

04:34 AM

I have setup like this is their any issue in this config file. Jason

04:47

KARTHICK

04:47 AM

Jason I have uninstalled react-instantsearch-dom package and this issue got resolved.Thanks for your time.

Typesense

Lightning-fast, open source search engine for everyone | Knowledge Base powered by Struct.AI

Indexed 3011 threads (79% resolved)

Join Our Community

Similar Threads

Issue with Typesense Instantsearch and Upgrading to React 18

Carl experienced problems updating packages for a project. VIVEK suggested disabling reactStrictMode, while Jason insisted on downgrading to React 17 due to compatibility issues. Carl eventually found a workaround.

17mo

Resolving Issue with Typesense and React Search Integration

Dipankar experienced issues with a search function using `typesense-instantsearch-adapter` & `react-instantsearch-dom`. robert solved the problem by suggesting to downgrade react version to 17.x from 18.x.

19mo

Issues with Typesense Frontend Search Integration

Akash experienced issues integrating Typesense into their frontend search, particularly with their search box. Jason guided them to troubleshoot, eventually identifying the issue to be with react-instantsearch-dom and suggesting a downgrade to react 17, which resolved the issue.

14mo

Implementing Search Suggestion/Autocomplete Functionality in Typesense

Denis needed advice on implementing search suggestions in Typesense. Jason provided a solution for fetching after 3+ letters. However, questions on design pattern and passing hooks remain unanswered.

21mo

Handling Exceptions with Typesense.js

Carl has problems handling typesense.js exceptions. Jason suggests handling it via InstantSearch and a feature request for the hooks library could expose the issue.

17mo