Using TypesenseInstantSearchAdapter in React App
TLDR Vasudev required application id to build a react app using algoliasearch. Kishore Nallan explained Typesense needs an API key and host and suggested checking an example. Further, Jason clarified that create-instantsearch-app will generate necessary scaffold including app id.
Aug 10, 2022 (17 months ago)
Vasudev
09:02 AMconst search = instantsearch({
// ...
searchClient: algoliasearch(
'YourApplicationID',
'YourSearchOnlyAPIKey'
),
});
how to get application id
Vasudev
09:38 AMKishore Nallan
10:02 AMVasudev
10:05 AMKishore Nallan
10:07 AMKishore Nallan
10:07 AMVasudev
10:15 AMVasudev
10:16 AMimport algoliasearch from 'algoliasearch/lite';
import {
InstantSearch,
Configure,
Hits,
SearchBox,
DynamicWidgets,
Panel,
Highlight,
RefinementList,
Pagination,
} from 'react-instantsearch-dom';
import PropTypes from 'prop-types';
import './App.css';
const searchClient = algoliasearch(
'latency',
'6be0576ff61c053d5f9a3225e2a90f76'
);
function App() {
return (
<div >
<header className="header">
<h1>Jobs Trail</h1>
</header>
<div className="ais-InstantSearch">
{/* instant_search */}
<InstantSearch searchClient={searchClient} indexName="instant_search">
<Configure hitsPerPage={8} />
<div className="search-panel">
<div className="search-panel__filters">
<DynamicWidgets fallbackWidget={RefinementList}></DynamicWidgets>
</div>
<div >
<SearchBox
className="searchbox"
translations={{
placeholder: '',
}}
/>
<Hits hitComponent={Hit} />
<div className="pagination">
<Pagination />
</div>
</div>
</div>
</InstantSearch>
</div>
</div>
);
}
function Hit(props) {
console.log(props)
return (
<div>
<img src={props.hit.image} align="left" alt={props.hit.name} />
<div className="hit-name">
<Highlight attribute="name" hit={props.hit} />
</div>
<div className="hit-description">
<Highlight attribute="description" hit={props.hit} />
</div>
<div className="hit-price">${props.hit.price}</div>
</div>
);
}
Hit.propTypes = {
hit: PropTypes.object.isRequired,
};
export default App;
Kishore Nallan
10:17 AMVasudev
10:18 AMVasudev
10:24 AMVasudev
10:24 AMJason
03:09 PMJason
03:10 PM> Application ID: can be any string - we'll be replacing this later in the guide
Jason
03:11 PMTypesense
Indexed 3011 threads (79% resolved)
Similar Threads
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.
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.
Issue with Typesense Adapter in React Search Box
Nikunj encountered an error with Typesense adapter, and Jason suggested using 'typesense-js' for building their custom UI.
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.
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.