Algolia backend search with Algolia Search Helper library for Angular.js-CodePudding

I'm planning to send the search request to Algolia through the backend for a security issue. I discovered here that Instantsearch supports this where you can specify your own customSearchClient, pass it as a parameter and it sends the request there.

Although Instansearch doesn't support Angular.js, I'm using the Algolia Search Helper library which comes with some helpers for Angular.js. I was wondering if this is possible there also.

In short I want to implement Algolia backend search with Angular.js without having to worry about building the search query.

This is how they instantiated the regular search client in their official example

'use strict';
// First let's define the usual configuration variables for our index
var applicationId = 'latency';
var apiKey = '249078a3d4337a8231f1665ec5a44966';
var index = 'bestbuy';
var client = algoliasearch(applicationId, apiKey);

// Define the `AgoliaSearchHelper` module
angular.module('AlgoliaSearchHelper', ['ngSanitize']).

// Expose the helper
factory('helper', function() {
  return algoliasearchHelper(client, index, {
    disjunctiveFacets: ['category'],
    hitsPerPage: 7,
    maxValuesPerFacet: 3
  });
}).
...

CodePudding user response：

In case anyone looking for this. It is possible to define a custom search client using Algolia Search Helper library as well. Github issue

You can create a custom search client in this manner and pass it to the factory

const customSearchClient = {
  search(requests, cb) {
    return fetch('https://algolia-backend-search.herokuapp.com/search', {
      method: 'post',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ requests }),
    }).then(function(res){return res.json()}).then(cb)
  }
};

var alSH = angular.module('AlgoliaSearchHelper', ['ngSanitize']);

// Expose the helper
alSH.factory('helper', function() {
  return algoliasearchHelper(customSearchClient, index, {
    disjunctiveFacets: ['category'],
    hitsPerPage: 7,
    maxValuesPerFacet: 3
  });
});

working demo for more understanding

If you want to work with Angular.js libraries such as $http and $q instead of the fetch API. It is also possible (make sure to remove the $scope.applys else will trigger a warning) - demo using $http and $q

If you want to return multiple Helpers from the same factory for querying different indices that is also possible - demo for multiple returns in factory

The search request will be sent to the backend and can be accessed within the request body. You can do relevant modifications to the request and to the results as well. That part is covered here. You can even add the index name from the backend if you want by setting an empty string for the index in the frontend and modifying the search request in backend (if you are concerned about exposing index name).