Reducing duplicate request to Algolia with angular instant search

Open Q&A
1

I have implemented Angular Instant Search, and I have noticed that when I perform a search or filter using facets, it sends duplicate requests to Algolia. It seems like this issue could be related to rendering or *ngIf problems but not sure at all. Even when everything appears to be ready and I perform a search, it still duplicates the request.

The difference in the request payload lies in the following attributes:

highlightPostTag: /ais-highlight
highlightPreTag: ais-highlight

I have tried turning off highlighting in the dashboard, but it doesn’t have any effect. Sometimes I only see one API call, but most of the time it sends two requests.

Here is the code for my search box.

import { Component, Inject, forwardRef, Optional, OnInit } from '@angular/core';
import { TypedBaseWidget, NgAisInstantSearch, NgAisIndex } from 'angular-instantsearch';

import connectSearchBox, {
  SearchBoxWidgetDescription,
  SearchBoxConnectorParams,
} from 'instantsearch.js/es/connectors/search-box/connectSearchBox';

@Component({
  selector: 'search-box',
  templateUrl: './search-box.component.html',
  styleUrls: ['./search-box.component.scss'],
})
export class SearchBoxComponent extends TypedBaseWidget<SearchBoxWidgetDescription, SearchBoxConnectorParams> implements OnInit {
  private timerId: ReturnType<typeof setTimeout> | null = null;
  public state: SearchBoxWidgetDescription['renderState'] = {
    clear(): void {},
    isSearchStalled: false,
    query: '',
    refine(value: string): void {},
  };

  // Rendering options
  constructor(
    @Inject(forwardRef(() => NgAisIndex))
    @Optional()
    public parentIndex: NgAisIndex,
    @Inject(forwardRef(() => NgAisInstantSearch))
    public instantSearchInstance: NgAisInstantSearch
  ) {
    super('SearchBox');
  }

  public onChangeDebounced(value: string) {
    if (this.timerId) clearTimeout(this.timerId);
    this.timerId = setTimeout(() => this.state.refine(value), 800);
  }

  onKeyUp(input: string) {
    if (!input) {
      this.state.refine('');
    }
  }
  onClear() {
    this.state.refine('');
  }
  ngOnInit() {
    this.createWidget(connectSearchBox, {
      // instance options
    });
    super.ngOnInit();
  }
}

html

<div class="app-search">
  <div class="mb-2 position-relative h-100 w-100">
    <input
      type="search"
      class="form-control"
      placeholder="Search..."
      #input
      [value]="this.state.query"
      autocomplete="off"
      autocorrect="off"
      autocapitalize="off"
      (keyup.enter)="this.state.refine(input.value)"
      (keyup)="onKeyUp(input.value)"
      [value]="this.state.query"
    />
    <span class="mdi mdi-magnify search-icon"></span>
    <button (click)="onClear()" type="button" *ngIf="state.query" class="btn-clear btn btn-icon shadow-none">
      <span class="mdi app-icon mdi-close"></span>
    </button>
  </div>
</div>