Building a custom connector

import type { APIConnector } from "@elastic/search-ui";

class MyAPIConnector implements APIConnector {
  async onSearch(
    state: RequestState,
    queryConfig: QueryConfig
  ): Promise<ResponseState> {
    const { searchTerm, current, filters, sort } = state;
    // perform a request to your API with the request state
    const response = await fetch("https://api.my-host/search", {
      method: "POST",
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify({
        searchTerm,
        current,
        filters,
        sort
      })
    });
    // response will need to be in the shape of ResponseState.
    // Alternatively you could transform the response here
    return response.json();
  }

  async onAutocomplete(
    state: RequestState,
    queryConfig: AutocompleteQueryConfig
  ): Promise<AutocompleteResponseState> {
    const response = await fetch(
      "https://api.my-host/autocomplete?query" + state.searchTerm,
      {
        headers: {
          "Content-Type": "application/json"
        }
      }
    );
    // response will need to be in the shape of AutocompleteResponseState.
    // Alternatively you could transform the response here
    return response.json();
  }

  onResultClick(params): void {
    console.log(
      "perform a call to the API to highlight a result has been clicked"
    );
  }

  onAutocompleteResultClick(params): void {
    console.log(
      "perform a call to the API to highlight an autocomplete result has been clicked"
    );
  }
}

const connector = new MyAPIConnector();

const config = {
  apiConnector: connector,
  searchQuery: { ... },
  autocompleteQuery: { ... }
};

const App = () => (
  <SearchProvider config={config}>
    <div className="App">
      <SearchBox />
    </div>
  </SearchProvider>
);