instantsearch.js without Algolia possible?

[timkelty]

A bit of an odd question I realize, but I'm wondering if it might be possible to leverage instantsearch without making a call to Algolia. (perhaps by using options.createAlgoliaClient)

My use-case is an app with an existing/configurable api, but where syncing to Algolia isn't an option. However, it seems something like this might be useful for mocking responses for tests, or even offline searches.

Before I dig in and try I just wanted to throw this out there and see if anyone knows if it is even possible, or if there is any example of something similar.

[bobylito]

Hi @timkelty thanks for asking the hard questions 🤔

We don't actually lock-in the usage of InstantSearch.js to Algolia, per se (it's open source after all 😄). As you mentionned there are two cases:

• doing actual searches with another "engine": this is tricky because of the options that are required. I would say that implementing an Algolia like REST endpoint would be easier in this case (but still difficult). In this case, createAlgoliaAgent should be used to redirect the endpoints to your server.
• mocking / caching for offline: that's seems feasible and yes the client is a perfect target for that. You only have to implement addAlgoliaAgent and search methods of the client.

That could be a question to ask on discourse if you want more community feedback.

[timkelty]

Thanks @bobylito!

[EyalIsr]

@timkelty @bobylito Any chance you have any jsfiddle or a sample code for options.createAlgoliaClient?
I'm interesting in the "another-engine"-instantsearch.js interface capability.
Thanks!

[Haroenv]

We don’t currently have an example for it that I know of that’s more than an experiment @eyallsr, but we do confirm no major hurdles were present doing it and Alex’ earlier answer still is the correct way, although we are planning to change / make it simpler in a next minor version (see recently merged PRs)

[EyalIsr]

@Haroenv, Thanks! Looking forward to this version!

[bobylito]

@EyalIsr You can now use the new option searchClient to be able to plug a custom client. https://deploy-preview-2894--algolia-instantsearch.netlify.com/v2/instantsearch.html#struct-InstantSearchOptions-searchClient

[mthuret]

Hi @EyalIsr, I'm curious, can you tell us a bit more about what are you going to build with the usage of the createAlgoliaClient? Thanks :)

[EyalIsr]

@mthuret I'm thinking of using the UI and API with my current search endpoint (it's basically a web API which underlying using a different search engine, a very common one...).
I haven't had a time to test it yet, but I believe that the searchClient option should help me with this exact task: feeding it with results compatible to the API, and have the beautiful instantsearch capabilities.
Did I misunderstood something or had wrong assumptions regarding this feature? Thanks!

[Georgian]

@EyalIsr I'm curious to hear how are you implementing the refinement lists. Yes, I also override searchClient, but I somehow need to feed attributesForFaceting to my Index (which btw is NOT an Algolia one). P.S. I'm using vue-instantsearch

[bobylito]

What about you hard code it into your searchClient @Georgian ? (or make it a parameter of the constructor of your search client)

[Georgian]

@bobylito Apparently, facets auto-set themselves if they appear in the JSON result object which search method returns. Example:

{
  'results': [
    {
      'hits': [
        {
          'name': 'Sony - PlayStation 3 The Last of Us Bundle - 500GB',
          '_highlightResult': {
            'name': {
              'value': 'Sony - __ais-highlight__PlayStation__/ais-highlight__ 3 The Last of __ais-highlight__Us__/ais-highlight__ Bundle - __ais-highlight__500GB__/ais-highlight__'
            }
          }
        }
      ],
      'facets': {
        'consoles': {
          'Sony': 1 // will appear in the refinement list of the 'consoles' component
        }
      },
      'nbHits': 1,
      'page': 0,
      'nbPages': 1,
      'hitsPerPage': 20,
      'processingTimeMS': 3,
      'exhaustiveNbHits': true,
      'query': 'playstation4 (500gb) us ',
      'params': 'query=playstation4%20(500gb)%20us%20&page=0&highlightPreTag=__ais-highlight__&highlightPostTag=__%2Fais-highlight__&facets=%5B%5D&tagFilters=',
      'index': 'game-consoles'
    }
  ]
}

[Braunson]

Any updates from anyone since the last post, any plugins/code snippets?

I've been looking how to do this for a while (using a custom search engine with the InstantSearch js) for a simple reason, side-project, I want to get a nice UI going but don't necessarily want to subscribe to Algolia (a bit expensive for a part time side project) but once it gains some $$ I'll probably switch to Algolia ;)

[Haroenv]

This guide is still the only one we have on the topic: https://www.algolia.com/doc/guides/building-search-ui/going-further/backend-search/in-depth/backend-instantsearch/js/#introduction

Sorry for not being able to give more information @Braunson

[Braunson]

@Haroenv Thanks for the link it's a ton of help 😄 After I'm done I'll throw together a write-up on using this with Laravel/Vue.

[adenta]

@Braunson were you able to get a writeup somewhere?

[jeremylynch]

There are a few libraries which will help you achieve this:

Meilisearch: https://github.com/meilisearch/instant-meilisearch Typesense: https://github.com/typesense/typesense-instantsearch-adapter

This library is a plugin to establish the communication between your Meilisearch instance and the open-source InstantSearch tools (powered by Algolia) for your front-end application.

[benjick]

Is there any browser implementation "backend" for instantsearch.js? I only have 200 records I want to filter on