Capture filter values during requests

[callmekatootie]

This is more of a follow up to this discussion

The middleware approach works well - except when I am directly setting the filters. In such a scenario, the onStateChange() hook of the middleware is not being called.

Bug or feature? What options do I have to capture the filter set?

Also - I am using the following code to get the details of the data sent to Algolia to fetch results... Unsure if this is expected to return filters value...

...
onStateChange: () => {
  const queryParams = instantSearchInstance.mainIndex
  .getHelper()
  ?.getQuery();
  ...
}

[Haroenv]

How are you "directly setting" the filters?

[callmekatootie]

Your code does give me the filters set. But my middleware code doesn't.

This is my original middleware based code:

function createCaptureFiltersMiddleware(setMyInternalState) {
  return function captureFiltersMiddleware({ instantSearchInstance }) {
    return {
      onStateChange: () => {
        const queryParams = instantSearchInstance.mainIndex
          .getHelper()
          ?.getQuery();

        setMyInternalState(queryParams);
      },
    };
  };
}

function Middleware() {
  const { addMiddlewares } = useInstantSearch();
  const { setMyInternalState } = useContext(FooBarContext); // My internal state handler (to capture the search params)

  useLayoutEffect(() => {
    const middleware = createCaptureFiltersMiddleware(setMyInternalState);
    return addMiddlewares(middleware);
  }, [addMiddlewares, setMyInternalState]);
}

function MyTopComponent() {
  return (
    <InstantSearch>
      <Configure {with some props}>
      <MySearchFiltersComponent />
      <Middleware />
    </InstantSearch>
  )
}

Omitted code for brevity. The problem with this code is that the onStateChange() method is called for all filters but one - the ones that I am setting through <Configure /> ...

Anyway - I think I will go with using your approach instead of the middleware - the results._state.getQueryParams() one

[callmekatootie]

Update - results._state.getQueryParams() seems to be missing the facetFilters values. I am able to see this in the search request made by the user - but when I try to read it with results._state.getQueryParams(), it does not contain it...

Is that expected? The facet filters were set through <RefinementList />s ...

[callmekatootie]

In the code sandbox that shared, you can see that when you filter by brands - and then click on the Export button - the brands are not part of the console dump:

I had filtered by brands before I exported - and you can see that it's missing in the params retrieved...

[Haroenv]

Ah sorry I confused getQuery (gets all the parameters) with getQueryParams (get the non-"managed" parameters). To get access to the helper, you need to use a custom widget though, so the code becomes this: https://codesandbox.io/p/devbox/exporting-forked-3rp596

function connectExport(renderFn) {
  return (widgetParams = {}) => ({
    $$type: 'custom.export',
    init(initOptions) {
      renderFn(
        {
          ...this.getWidgetRenderState(initOptions),
          instantSearchInstance: initOptions.instantSearchInstance,
        },
        true
      );
    },
    render(renderOptions) {
      renderFn(
        {
          ...this.getWidgetRenderState(renderOptions),
          instantSearchInstance: renderOptions.instantSearchInstance,
        },
        false
      );
    },
    getWidgetRenderState({helper, instantSearchInstance, parent}) {
      return {
        refine: () => {
          return instantSearchInstance.client.search([
            {
              type: 'default',
               indexName: parent.getIndexName(),
              ...helper.getQuery()
            }
          ])
        },
        widgetParams,
      }
    }
  })
}

function Export() {
  const { refine } = useConnector(connectExport, {});

  return (
    <button
      type="button"
      onClick={() => {
        refine().then((results) => {
          console.log(results);
        });
      }}
    >
      export (see console)
    </button>
  );
}

In the logs I now see a the values of the refinement list as well.

[callmekatootie]

Thank you so much for your help and sticking with me through this. The proposed solution works really well. 👍