Browser Client

安装

它在 npm 上可用为 @searchkit/instantsearch-client。

npm install @searchkit/instantsearch-client

然后在你的项目中导入它

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

用法

下面是一个如何使用客户端将 React Instantsearch 与 Instantsearch Elasticsearch 适配器一起使用的简单示例。

Node API 路由已在 /api/search 下设置，并且客户端用于从 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>
  );
}

头部

您可以将头部传递给客户端，以便在每次请求时发送。

const searchClient = Client({
  url: "/api/search",
  headers: {
    "x-api-key": "my-api-key",
  },
});

或者您可以传递一个返回头的函数。

const searchClient = Client({
  url: "/api/search",
  headers: () => ({
    auth: "Bearer" + window.localStorage.getItem("token"),
  }),
});

直接使用 Elasticsearch

您还可以使用客户端直接从浏览器查询 Elasticsearch，从而无需中间的 Node API。如果您通过自己的应用程序 API 代理 Elasticsearch API，这将非常有用。

工作演示可用。

 
import Client from '@searchkit/instantsearch-client'
import Searchkit, { SearchkitConfig } from "searchkit"
import { config } from "./api/config"
 
const sk = new Searchkit({
  connection: {
    host: "https://127.0.0.1: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))
      }
    }
  }
});

参数

客户端接受以下参数

**配置** - Searchkit 实例。
**请求选项** - **可选**。Searchkit RequestOption。这对于在发送到 Elasticsearch 之前修改请求和响应很有用。这对于修改请求正文或修改响应很有用。您可以在 Searchkit API 文档中阅读有关这些选项的更多信息。

Node API 构建 Next.js 应用