feat(search-client): Add support for Custom Search Clients

[francoischalifour]

This PR adds support for the searchClient parameter. This allows any Angular InstantSearch user to plug their own search client (including a custom Algolia backend).

Example

import * as algoliasearch from 'algoliasearch/lite';

// With the default Algolia search client
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  title = 'app';
  config = {
    indexName: 'concerts',
    searchClient: algoliasearch('appId', 'apiKey')
  };
}

// With a custom search client
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  title = 'app';
  config = {
    indexName: 'concerts',
    searchClient: {
      search(requests) {
        return fetchResultsFromRequests(requests);
      }
    }
  };
}

Related

• feat(search-client): Add support for Custom Search Clients instantsearch#2894
• feat(search-client): Add support for Custom Search Clients vue-instantsearch#432

[algobot]

Deploy preview for angular-instantsearch ready!

Built with commit 512d6c7

https://deploy-preview-111--angular-instantsearch.netlify.com

[samouss]

Instead of rely on the object type we can create a new type that will better represent what we expect.

[francoischalifour]

It wasn't done for searchParameters though, I was wondering if there was a reason, @iam4x?

Otherwise, I will add a more strict type for searchClient.

[samouss]

Indeed, for the SearchParameters it's a bit more tedious because the data structure is way more larger. But we should add the correct types at some point.

[iam4x]

searchParameters are what the Algolia API expect, it's hard to type since it can change at any time without our control.

Here you should create a type and use it 👍

[francoischalifour]

Makes sense. I'm working on the type according to the spec.

[Haroenv]

You can import searchParameters from the typing of algoliasearch

[iam4x]

We do not want to deprecate this yet, it is still used for the server side rendering strategy:

import {
  createSSRAlgoliaClient,
  parseServerRequest
} from "angular-instantsearch";

[...]

constructor(
  private httpClient: HttpClient,
  private transferState: TransferState,
  private injector: Injector,
  @Inject(PLATFORM_ID) private platformId: Object
) {
  const req = isPlatformServer(this.platformId)
    ? this.injector.get("request")
    : undefined;

  const searchParameters = parseServerRequest(req);

  this.instantSearchConfig = {
    searchParameters,
    appId: "latency",
    apiKey: "6be0576ff61c053d5f9a3225e2a90f76",
    indexName: "ikea",
    urlSync: true,
    createAlgoliaClient: createSSRAlgoliaClient({
      makeStateKey,
      HttpHeaders,
      transferState: this.transferState,
      httpClient: this.httpClient
    })
  };
}

If we want to get rid of createAlgoliaClient we have to support server side rendering as well with the new method.

I can help for this 👍

[francoischalifour]

I added createSSRSearchClient() and deprecated createSSRAlgoliaClient(). Hope this is how you envisioned it!

[iam4x]

Thank you @francoischalifour