Installation
It is available as @searchkit/instantsearch-client
on npm.
npm install @searchkit/instantsearch-client@latest
# or
yarn add @searchkit/instantsearch-client@latest
Then import it in your project:
import Client from "@searchkit/instantsearch-client";
Usage
Below is a simple example of how to use the client to use React Instantsearch with Instantsearch Elasticsearch adapter.
Node API route has been setup under /api/search
and the client is used to fetch the results from the API.
const searchClient = Client({
// the url of your instantsearch-elasticsearch-adapter API endpoint
url: "/api/search",
});
export default function Web() {
return (
<div className="ais-InstantSearch">
<InstantSearch indexName="imdb_movies" searchClient={searchClient}>
<SearchBox />
<Hits />
</InstantSearch>
</div>
);
}
Headers
You can pass headers to the client to be sent with each request.
const searchClient = Client({
url: "/api/search",
headers: {
"x-api-key": "my-api-key",
},
});
or you can pass a function that returns headers.
const searchClient = Client({
url: "/api/search",
headers: () => ({
auth: "Bearer" + window.localStorage.getItem("token"),
}),
});
Use Elasticsearch Directly
You can also use the client to directly query Elasticsearch from the browser, skipping needing a node API in the middle. This is useful if you're proxying the Elasticsearch API through your own application API.
Working demo available.
import Client from '@searchkit/instantsearch-client'
import Searchkit, { SearchkitConfig } from "searchkit"
import { config } from "./api/config"
const searchkitClient = new Searchkit({
connection: {
host: "http://localhost:9200"
},
search_settings: {
// ... see Searchkit API docs for configuration options
}
})
const searchClient = Client(searchkitClient);