Passing multiple values to a query parameter

Hi,

I’m trying to pass multiple values from my Refinement List widgets to their corresponding query parameters.

I want the URL to look like this “start_month=january,february” rather than “start_month[0]=january&start_month[1]=february”

Is this possible? Thank you!

Depending on your framework, you can manually control the conversion from query string to search state using your own stateToRoute and routeState functions. This allows you to encode your query state in the URL however you like.

Here are the docs for InstantSearch React Hooks:

Thank you! I am using those functions (vanilla js version) and have been playing around with them, but I haven’t been able to get them to do what I need. I tried converting the array of values for each parameter into a string but I kept getting errors as if the parameter didn’t always exist, even though I did write in a check to see if it did exist.

I would have thought just converting the arrays such as indexUiState.refinementList.city using toString() would have done it but it doesn’t work.

Have you got any tips? I’m not very experienced in JS.

Here is what I have now and what I’ve been using as a base to try and change the URL:


 var search = instantsearch({
    indexName: INSTANT_SEARCH_INDEX_NAME,
    searchClient: searchClient,
    advancedSyntax: true,
    routing: {
        stateMapping: {
          stateToRoute(uiState) {
            const indexUiState = uiState[INSTANT_SEARCH_INDEX_NAME];
            return {
              q: indexUiState.query,
              city: indexUiState.refinementList && indexUiState.refinementList.city,
              start_month:
                indexUiState.refinementList && indexUiState.refinementList.start_month,
              job_type:
                indexUiState.refinementList && indexUiState.refinementList.job_type,
              sector:
                indexUiState.refinementList && indexUiState.refinementList.sector,
              page: indexUiState.page,
            }
          },
          routeToState(routeState) {
            return {
              [INSTANT_SEARCH_INDEX_NAME]: {
                query: routeState.q,
                refinementList: {
                  city: routeState.city,
                  start_month: routeState.start_month,
                  job_type: routeState.job_type,
                  sector: routeState.sector
                },
                page: routeState.page,
              },
            };
          },
        },
      },
  });

Thank you!