How to sync custom parameter in InstantSearch uiState with custom connector

[AntoineDuComptoirDesPharmacies]

Hi everyone,

We are trying to move from react-instantsearch-dom to react-instantsearch-hook-web but we are having a hard time converting our custom connectors.

Previously, we had a custom connector used for rendering capability only (Choose to display Hits in grid or list), so it was not modfifying the Algolia query.
The connector state was stored in InstantSearch state so everytime the user refine the value, we will store his decision in the browser URL. (Thanks to refineValue(searchState, nextValue, context, resetPage))

We followed the tutorial here https://www.algolia.com/doc/guides/building-search-ui/widgets/create-your-own-widgets/react-hooks/ and we read your answers here and here :
#5344
#5345

However, we still do not succeed to have a state (not linked to the Query SearchParameters) stored in InstantSearch state.

We tried to add the state in SearchParameters and uiState but Algolia complain saying it is an Uknown parameter. We understand this error message as it is not a SearchParameter that we can send through Algolia API.

  const getWidgetUiState = (uiState, widgetStateOptions, rest) =>
    // widgetStateOptions contains two keys:
    //   - searchParameters: to compute the next uiState
    //   - helper: to get information about the state of the search
    //
    // The function must return the next uiState
  {
    const { searchParameters } = widgetStateOptions;

    uiState.display = searchParameters?.display ?? widgetParams.defaultRefinement;

    return uiState
}

  const getWidgetSearchParameters = (searchParameters, { uiState }) =>
    // widgetSearchParametersOptions contains one key:
    //   - uiState: to compute the next SearchParameters
    //
    // The function must return the next SearchParameters
    {
      searchParameters.display = uiState?.display ?? widgetParams.defaultRefinement;

      return searchParameters;
}

Then, we tried to store the value of the widget inside the connector through a local variable widgetState.
It seems to work a little bit as we can create/call a refine method. It is changing the value returned by the use*** but it does not update the URL query parameters.

  const refineFactory = (renderOptions) => value => {
    widgetState.value = value;
    render(renderOptions);
  };

If you have any tips about having a custom state property synchronized in InstantSearch state / URL routing, we will be glad yo hear.

Thanks in advance for your help.
Yours faithfully,
LCDP

[AntoineDuComptoirDesPharmacies]

Some new informations :

In refine method,, we successfuly updated the widget state value in uiState by calling setIndexUiState from useInstantSearch.

However, we do not unsertand why but if we do not call instantSearchInstance.refresh(); after setIndexUiState, then we enter an infinite execution loop.

All these seems a little bit hacky, I am sure we are missing something from your custom connector architecture.

[Haroenv]

Do you have a complete sandbox of what you have so far, and also what you had before with React InstantSearch dom that you are reworking?

[AntoineDuComptoirDesPharmacies]

Here is a codesandbox of our connector in react-instantsearch-dom (connectDisplay) :
https://codesandbox.io/s/practical-elion-jt4gtz?file=/src/App.js

I am trying to prepare a sandbox of what I have at the moment with hooks.
But i am not really far.

[AntoineDuComptoirDesPharmacies]

And here is the verion with react-instantsearch-hooks-web :
https://codesandbox.io/s/frosty-water-tjh563?file=/src/App.tsx

It seems to be very hacky to set uiState calling directly this method in the refine.
Moreover, we are wondering how InstantSearch is gonna behave if we have multiple instance of this connector in the page as widgetState is local and not shared between multiple instance of the connector.

[AntoineDuComptoirDesPharmacies]

Here is a new version of the connectDisplay where refine do not use anymore setIndexUiState but instead reproduce the same behavior by calling helper.setState.

Is it better ? Is there another more compliant solution ?

import omit from 'lodash/omit';
const connectDisplay = (renderFn, unmountFn = () => {}) => (
  widgetParams,
  ...restb
) => {
  const widgetState = {
    value: widgetParams.defaultRefinement,
    refine: undefined,
    setIndexUiState: widgetParams.setIndexUiState,
  };

  const refineFactory = renderOptions => value => {
    widgetState.value = value;

    const { helper, parent } = renderOptions;

    const uiState = parent.getWidgetUiState({});
    const indexName = parent.getIndexId();
    const indexUiState = uiState [indexName] ?? {};

    const nextUiState = getWidgetUiState(indexUiState);

    helper.setState(
      parent.getWidgetSearchParameters(helper.state, {
        uiState: nextUiState,
      }),
    );
    helper.search();
  };

  const getWidgetRenderState = renderOptions => {
    const {
      results,
      state,
      createURL,
      instantSearchInstance,
      helper,
      parent,
    } = renderOptions;
    if (!widgetState.refine) {
      widgetState.refine = refineFactory(renderOptions);
    }

    // rendering state when there are results
    return {
      currentRefinement: widgetState.value,
      refine: widgetState.refine,
    };
  };

  const init = initOptions => {
    // initOptions contains three keys:
    //   - helper: to modify the search state and propagate the user interaction
    //   - state: which is the state of the search at this point
    //   - templatesConfig: the configuration of the templates
    const { instantSearchInstance } = initOptions;

    renderFn(
      {
        ...getWidgetRenderState(initOptions),
        instantSearchInstance,
      },
      true,
    );
  };

  const render = renderOptions => {
    // renderOptions contains four keys:
    //   - results: the results from the last request
    //   - helper: to modify the search state and propagate the user interaction
    //   - state: the state at this point
    //   - createURL: function to create a url for ui state
    const { instantSearchInstance } = renderOptions;

    renderFn(
      {
        ...getWidgetRenderState(renderOptions),
        instantSearchInstance,
      },
      false,
    );
  };

  const dispose = ({ state }) => {
    // disposeOptions contains one key:
    //   - state: the state at this point to
    //
    // The dispose method should return the next state of the search,
    // if it has been modified.
    unmountFn();
  };

  const getWidgetUiState = (uiState, widgetStateOptions, rest) =>
    // widgetStateOptions contains two keys:
    //   - searchParameters: to compute the next uiState
    //   - helper: to get information about the state of the search
    //
    // The function must return the next uiState
  {
      if (widgetState.value === widgetParams?.defaultRefinement) {
        if (uiState.display) {
          return omit(uiState, 'display');
        }
        return uiState;
      }

      return {
        ...uiState,
        display: widgetState.value,
      };
    };
  const getWidgetSearchParameters = (searchParameters, { uiState }) =>
    // widgetSearchParametersOptions contains one key:
    //   - uiState: to compute the next SearchParameters
    //
    // The function must return the next SearchParameters
    {
      widgetState.value = uiState?.display ?? widgetParams.defaultRefinement;

      return searchParameters;
    };

  const getRenderState = (renderState, renderOptions, ...rest) =>
    // renderOptions contains four keys:
    //   - results: the results from the last request
    //   - helper: to modify the search state and propagate the user interaction
    //   - state: the state at this point
    //   - createURL: function to create a url for ui state
    {
      const newRenderState = getWidgetRenderState(renderOptions);

      return {
        ...renderState,
        display: newRenderState,
      };
    };
  return {
    init,
    render,
    dispose,
    getWidgetUiState,
    getWidgetSearchParameters,
    getRenderState,
    getWidgetRenderState,
  };
};
export default connectDisplay;

[AntoineDuComptoirDesPharmacies]

Some more informations about to the infinite loop (which is in fact not linked to the custom Connector subject).

As for this problem, it was coming from the fact that we are hiding the Hits while InstantSearch status is loading.
However, we have a useHits hook in our Hit components.

So, every time we are changing the display, Hit is mount which invoke new useHits who pass InstantSearch status to loading who unmount the Hits / useHits hook. When status goes to idle, it starts a new loop.

It is a side question but, why InstantSearch status pass loading when some new connector are added to the tree (even without new request) ?
For the moment, we workaround this by hiding the results on stalled status instead.