Browser Client – Searchkit

Installation

It is available as @searchkit/instantsearch-client on npm.

npm install @searchkit/instantsearch-client

Then import it in your project:

import Client from "@searchkit/instantsearch-client";
// OR if using CDN
const Client = window.SearchkitInstantsearchClient

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 sk = new Searchkit({
  connection: {
    host: "http://localhost:9200"
    // cloud_id: "my-cloud-id" if using Elastic Cloud
  },
  search_settings: {
    // ... see Searchkit API docs for configuration options
  }
})
 
const searchClient = Client(sk, {
  // ... see Searchkit API docs for configuration options
  // example of modifying the query that performs the organic match query
  getQuery(query, search_attributes, config) {
    return {
      combined_fields: {
        query: query,
        fields: search_attributes.map((attr) => (typeof attr === 'string' ? attr : attr.field))
      }
    }
  }
});

Parameters

The client accepts the following parameters:

Configuration - The Searchkit instance.
RequestOptions - Optional. The Searchkit RequestOption. This is useful for modifying the request and response before it is sent to Elasticsearch. This is useful for modifying the request body, or modifying the response. You can read more about these options in the Searchkit API docs.

Node API Build a Next.js App