Instantsearch.js: Idea: allow mapping for index name in URL

Created on 21 Mar 2018  路  3Comments  路  Source: algolia/instantsearch.js

Hello there,

I'm following the progress on the urlSync rewrite (#2216) and I'm wondering if you would consider the following feature.

Do you want to request a feature or report a bug?

Request a feature

Feature: What is your use case for such a feature?

I'd like to be able to map the real index name to a string. For instance, I'd like to have &idx=experiences instead of &idx=Experience_production in my URL.

The rationale behind this is to make the URL a bit shorter, and cleaner (we don't display the current environment as part of the index name).

Feature: What is your proposed API entry? The new option to add? What is the behavior?

We could pass an object when we initialize InstantSearch:

"indicesMapping": {
  "experiences": "Experience_production",
  "agenda": "Event_production"
},
"index": "experiences"
Core Feature

Most helpful comment

In order to do that, you need to implement a stateMapping that will hold the knowledge of the translation of the index names. Something like:

const search = instantsearch({
  // credentials
  routing: {
    stateMapping: {
      stateToRoute:  function(uiState) {
        return { idx: uiState.sortBy && uiState.sortBy.replace('_production', '') }
      },
      routeToState: function(routeState) {
        return { sortBy: routeState.idx && routeState.idx + '_production' }
      }
    }
  }
});

The code might need some real testing but that's the general idea.

All 3 comments

You'd be able to synchronise a connectSortBy to have behaviour like that, but I think I do get the use case

You will be able to do that with the new routing system, more specifically the stateMappings. See https://github.com/algolia/instantsearch.js/pull/2829 for more informations.

In order to do that, you need to implement a stateMapping that will hold the knowledge of the translation of the index names. Something like:

const search = instantsearch({
  // credentials
  routing: {
    stateMapping: {
      stateToRoute:  function(uiState) {
        return { idx: uiState.sortBy && uiState.sortBy.replace('_production', '') }
      },
      routeToState: function(routeState) {
        return { sortBy: routeState.idx && routeState.idx + '_production' }
      }
    }
  }
});

The code might need some real testing but that's the general idea.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

timkelty picture timkelty  路  3Comments

bobylito picture bobylito  路  3Comments

ChristopherDosin picture ChristopherDosin  路  4Comments

egyprotech picture egyprotech  路  3Comments

Maaark picture Maaark  路  4Comments