#community-help

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.

Powered by Struct AI
15
17mo
Solved
Join the chat
Aug 10, 2022 (17 months ago)
Vasudev
Photo of md5-591a0ac3f5f7ef9eb6e6fc35534beeae
Vasudev
09:02 AM
const search = instantsearch({
  // ...
  searchClient: algoliasearch(
    'YourApplicationID',
    'YourSearchOnlyAPIKey'
  ),
});

how to get application id
09:38
Vasudev
09:38 AM
Kishore Nallan please help me with this
Kishore Nallan
Photo of md5-4e872368b2b2668460205b409e95c2ea
Kishore Nallan
10:02 AM
That seems be a snippet from algolia. For Typesense you need API key and host. Check our example apps.
Vasudev
Photo of md5-591a0ac3f5f7ef9eb6e6fc35534beeae
Vasudev
10:05 AM
yeah but Application id is also mentioned on typesense documentation
Kishore Nallan
Photo of md5-4e872368b2b2668460205b409e95c2ea
Kishore Nallan
10:07 AM
That's just logs. For actual code config, check this example: https://github.com/typesense/showcase-ecommerce-store/blob/master/src/app.js
10:07
Kishore Nallan
10:07 AM
You've to instantiate TypesenseInstantSearchAdapter
Vasudev
Photo of md5-591a0ac3f5f7ef9eb6e6fc35534beeae
Vasudev
10:15 AM
what i am trying is creating an react app and trying to access hits with react-instantsearch
10:16
Vasudev
10:16 AM
import React from 'react';
import 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
Photo of md5-4e872368b2b2668460205b409e95c2ea
Kishore Nallan
10:17 AM
You've to use the adaptor, can't use instant search directly with Typesense without that.
Vasudev
Photo of md5-591a0ac3f5f7ef9eb6e6fc35534beeae
Vasudev
10:18 AM
okay
10:24
Vasudev
10:24 AM
i have built a UI as you are describing here, i need react app to show everything
10:24
Vasudev
10:24 AM
cant i do that without the TypesenseInstantSearchAdapter
Jason
Photo of md5-8813087cccc512313602b6d9f9ece19f
Jason
03:09 PM
create-instantsearch-app will generate that scaffold for you with application ID (for which you can enter anything), but if you follow further in the guide you’ll see that you will be replacing some of that generated code with the Typesense instantsearch adapter
03:10
Jason
03:10 PM
Just below the screenshot of the code snippet you posted, the guide says:

> Application ID: can be any string - we'll be replacing this later in the guide
03:11
Jason
03:11 PM
Then it shows you what snippet to add to app.js for the adapter and what existing snippet to replace

Typesense

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

Indexed 3011 threads (79% resolved)

Join Our Community