Issues with Typesense Frontend Search Integration
TLDR 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.
1
1
Sep 24, 2022 (13 months ago)
Akash
02:02 PM1
Jason
02:04 PMWhat error are you running into?
Akash
02:05 PMimport React from "react";
import ReactDOM from "react-dom";
import { SearchBox } from "react-instantsearch-dom";
import TypesenseInstantSearchAdapter from "typesense-instantsearch-adapter";
const typesenseInstantsearchAdapter = new TypesenseInstantSearchAdapter({
server: {
apiKey: "abcd", // Be sure to use an API key that only allows search operations
nodes: [
{
host: "localhost",
port: "8108",
protocol: "http",
},
],
cacheSearchResultsForSeconds: 2 * 60, // Cache search results from server. Defaults to 2 minutes. Set to 0 to disable caching.
},
// The following parameters are directly passed to Typesense's search API endpoint.
// So you can pass any parameters supported by the search endpoint below.
// query_by is required.
additionalSearchParameters: {
query_by: "name,description,categories",
},
});
const searchClient = typesenseInstantsearchAdapter.searchClient;
const App = () => (
<InstantSearch indexName="products" searchClient={searchClient}>
<SearchBox />
<Hits />
</InstantSearch>
);
Akash
02:05 PMJason
02:06 PMAkash
02:06 PMAkash
02:06 PMJason
02:08 PMCould you try running that locally?
Jason
02:08 PMAkash
02:08 PMAkash
02:09 PMJason
02:09 PMAkash
02:09 PMAkash
02:10 PMJason
02:10 PMAkash
02:10 PMJason
02:11 PMJason
02:12 PMAkash
02:12 PMJason
02:13 PMJason
02:14 PMAkash
02:14 PMJason
02:15 PMAkash
02:15 PMJason
02:16 PMAkash
02:18 PMJason
02:19 PMAkash
02:20 PMJason
02:20 PMAkash
02:21 PMJason
02:21 PMJason
02:22 PMAkash
02:22 PMAkash
02:22 PMJason
02:25 PMJason
02:25 PMAkash
02:26 PMSep 25, 2022 (13 months ago)
Akash
06:06 AMAkash
06:08 AMAkash
06:08 AMJason
10:34 PMDowngrading to react and react-dom to 17 fixes the issue
Sep 26, 2022 (13 months ago)
Akash
05:57 AM1
Oct 12, 2022 (12 months ago)
Akash
11:10 AMJason
03:35 PMOct 13, 2022 (12 months ago)
Akash
02:33 PM'q': '120',
'query_by': 'is_out_of_stack',
'page': 1,
'sort_by': 'book_id:desc',
'filter_by': '&& book_type:[2]',
'facet_by': 'author,publication,category,language,keywords,book_type,binding,book_condition,subject,class',
'max_facet_values': 30,
'num_typos': 2,
'typo_tokens_threshold': 10,
'per_page': 204
},
Jason
02:34 PMAkash
02:35 PMAkash
02:40 PMAkash
02:41 PMJason
02:55 PMAkash
02:56 PMTypesense
Indexed 2779 threads (79% resolved)
Similar Threads
Connecting React Instant Search with Typesense Adapter
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.
Troubleshooting TypesenseInstantSearchAdapter without Node.js
John wanted to use TypesenseInstantSearchAdapter without Node.js. Jason helped by instructing to reference dist files directly, then fixing a bug that caused errors when doing so.
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.
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.
Using Typesense in a React App and Troubleshooting Postman Requests
asada inquired about using `typesense-js` in a React app. Jason confirmed its usage and addressed how to replace pre-built search UI components. Additionally, Jason helped Vasudev with troubleshooting a Postman request format issue.