Custom Router with multiple refinementList

Hello I have been trying to customize an implementation with the new router using the example here: https://codesandbox.io/s/l5z6zz4yoq

However when using more then one refinement list I get an error in stateToRoute (Line 41) which cannot ‘join’ of undefined when it reaches the additional widget as the object property being joined doesn’t exist.

I added a console.log and logged the state and I see that each refinementList is being looped over which as soon as it is finished with the brand it throws the error as that no longer exists.

My question would be how do I manage that as I have not been able to find any code samples to guide me in the right direction.

ps.: I have added the screenshot of the console.log with my own implementation.
image

edit: I just realized that CodeSandBox is not working. The code is still valid as it works locally

In this example you expect brand to always be defined. Adding another check to make sure that you don’t join on an undefined variable is needed when adding multiple refinement lists.

stateToRoute(uiState) {
  return {
    brands:
      (uiState.refinementList &&
        uiState.refinementList.brand && // ← THIS
        uiState.refinementList.brand.join("~")) ||
      "all",
    // ...
  };
}
1 Like

Thank you very much Francois, I guess this is a basic javascript thing rather then something to do with instantsearchjs but I think it would be helpful to include a sample for people like me that doesn’t have too much experience.

I’ll make sure to make the example more robust in the documentation.

Thank you for raising this issue.

1 Like