Why is sortBy becoming undefined???

[mmorris8]

I have a working state mapper and it sets the sortBy for my index correctly. However, the next time stateToRoute gets called the value becomes undefined. I have a valid sortBy widget, so I just don't get this.

[Haroenv]

Do you have a reproduction?

[mmorris8]

I'll try to build one - this code base (mine) has too many moving parts.

[mmorris8]

A little progress.. maybe. I turned off my virtual sortby widget. Now since there isn't a widget mounted for sortby I get the The UI state for the index "Providers" is not consistent with the widgets mounted. message, but the sortBy state passed to the stateToRoute method of my stateMapper is correct. Whu?

I'm doing something wrong in my virtual widget, but what...

[mmorris8]

The unset is occurring at the moment this call happens

  const sb = useSortBy({items: [
      { label: 'byName', value: indexName },
      { label: `byDistance`, value: `${indexName}_distance` },
    ]    
  })

[mmorris8]

I don't think that would affect it because I'm making that call and the statemapper invoked before the next line, which is debugger, so as far as I know there's no render that will occur in the meanwhile. There is a 3rd parameter for useSortBy that is undocumented named additionalWidgetProperties. I've tried passing the indexName as a string and as a prop of an object. I've also tried passing indexName as a prop alongside the items. I'm guessing the sortBy should be receiving default item somehow or derive it from the position in the item list,
For what it's worth though, there's nothing conditional in this widget and the others are turned off though I don't think they have conditionals either - I'm getting paranoid about those.

[mmorris8]

Walking through the code...

export function useConnector(connector) {
  var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
  var additionalWidgetProperties = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
  var serverContext = useInstantSearchServerContext();
  var ssrContext = useInstantSearchSSRContext();
  var search = useInstantSearchContext();
  var parentIndex = useIndexContext();

var search resolves to an indexName of 'root', which doesn't have sortBy properties and it is not the immediate ancestor of this widget. So again, I'm running into MultiIndex fun it seems.

[mmorris8]

I tried to build a test case but could not get the misbehavior I observed. In the example app stateToRoute gets called dozens of times making it hard to work with.

[mmorris8]

The reassignment happens after a hits module is rendered, be it my custom infiniteHits or the default Hits component. This is puzzling.

[mmorris8]

My SearchProviders component is reduced to this

<Index indexName={indexName} indexId="Providers">
      <SortFacet indexName={indexName}/>
      <Hits />
    </Index>

And my SortFacet reduced to just this.

const sb = useSortBy({items: [
      { label: 'byName', value: indexName },
      //{ label: `byDistance`, value: `${indexName}_distance` },
    ]    
  },{indexName})
  return null

If the SortFacet is present the Provider index sortBy is undefined. If I remove the facet (and therefore the call to useSortBy) the Provider index sortBy is "Providers" as it should be. There is definitely a bug here.

[mmorris8]

I have a smoking gun...

In file node_modules/instantsearch.js/es/widgets/index/index.js
In function addWidgets (at line 197)
I added this log statement at the start console.log('addWidgets localUiState start %o, widgets %o', localUiState, widgets)
and added this log statement just before the return console.log('addWidgets localUiState end %o', localUiState)

And got this log...

addWidgets localUiState start {sortBy: 'Providers'}, widgets [{…}]0: $$type: "ais.hits"$$widgetType: "ais.hits"dispose: ƒ dispose(_ref3)getRenderState: ƒ getRenderState(renderState, renderOptions)getWidgetRenderState: ƒ getWidgetRenderState(_ref2)getWidgetSearchParameters: ƒ getWidgetSearchParameters(state, _uiState)init: ƒ init(initOptions)render: ƒ render(renderOptions)[[Prototype]]: Objectlength: 1[[Prototype]]: Array(0)

addWidgets localUiState end {sortBy: undefined}

So the unset is happening here during the addition of the hits widget. I'm using the Algolia default Hits component. I'll continue working to find the exact call and try to determine a fix.

[mmorris8]

Somewhere in here.

privateHelperSetState(helper, {
          state: getLocalWidgetsSearchParameters(localWidgets, {
            uiState: localUiState,
            initialSearchParameters: helper.state
          }),
          recommendState: getLocalWidgetsRecommendParameters(localWidgets, {
            uiState: localUiState,
            initialRecommendParameters: helper.recommendState
          }),
          _uiState: localUiState
        });

[mmorris8]

Found it, I think

function getLocalWidgetsSearchParameters(widgets, widgetSearchParametersOptions) {
  var initialSearchParameters = widgetSearchParametersOptions.initialSearchParameters,
    rest = _objectWithoutProperties(widgetSearchParametersOptions, _excluded);
  return widgets.reduce(function (state, widget) {
    if (!widget.getWidgetSearchParameters || isIndexWidget(widget)) {
      return state;
    }
    if (widget.dependsOn === 'search' && widget.getWidgetParameters) {
      return widget.getWidgetParameters(state, rest);
    }
    // problem at this line
    debugger
    return widget.getWidgetSearchParameters(state, rest);
  }, initialSearchParameters);
}

The Hits module just returns the state. The settings in rest are NOT being merged in - now whether that should have happened in the useSortBy connector or useHits I don't know. At this point it's difficult to proceed without some better insight into the architecture. I do know enough now to write a fairly nasty hack fix - catch the return above and compare it to rest to make sure nothing in rest was replaced with "undefined" and if so, write it back before return. I'll stop here for now though.