Is possible to update configuration and and uiState parts at once?

[jsdmc]

Hey guys.
I'm faced a situation when I need to change pageSize and clear some state filters in one request.
At the moment i see that hitsPerPage can be updated only using refine from useConfig.

Is it possible to update configuration somehow with setIndexUiState?
I tried, but it didn't work. Changing configure part of state doesn't update relevant params in request.
Thanks

[Haroenv]

If you have a HitsPerPage widget, you can use setIndexUiState

const VirtualHitsPerPage() {
  useHitsPerPage();
  return null;
}

setIndexUiState({
  hitsPerPage: 4
})

[Haroenv]

parameters to configure should be updated with the props to the configure widget, as otherwise you will get into race conditions where the rendering tries to update the state back to what it was before the setIndexUiState call

[jsdmc]

parameters to configure should be updated with the props to the configure widget, as otherwise you will get into race conditions where the rendering tries to update the state back to what it was before the setIndexUiState call

Does this actually means that it's impossible to update configure and other filters from state at the same time? I hoped that it could work the same way as you described for useHitsPerPage because hitsPerPage also a part of configuration.
For the note I useuseConfigure hook.

Here is examples when I need to have only 1 request, and using configure widget separately is not a case.

Use case 1
I need to update refinementList and facetFilters in uiState and trigger only one search request with proper params.
In this case configure part is ignored and needed params are not added to search request.

useConfigure({...});
....
setIndexUiState({
  configure: {
    facetFilters: [...]
  },
  refinementList: {
    attribute: [...]
  }
})

Use case 2
I need to update hitsPerPage and load more results in one search request.
This doesn't work because updating page size also triggers page reset + search request.
Therefore we have 2 equal requests.

useHitsPerPage({ items: [{ label: '', value: 20, default: true } ]}); // used to load initial results from few pages at once. Later I need to set default page number and load more results
....
const { loadMore } = useInfiniteHits();
...
const extendedLoadMore = () => {
  setIndexUiState({ // triggers 1st request
     ...indexUiState,
     hitsPerPage: 10
  });
  loadMore(); // triggers 2nd request
};

@Haroenv any thoughts on that? Thanks

[Haroenv]

Can you explain the first use case more in detail. What are those facetFilters exactly? I fear they might conflict with the refinementlist you also have on the page.

[jsdmc]

Can you explain the first use case more in detail. What are those facetFilters exactly? I fear they might conflict with the refinementlist you also have on the page.

Sure. facetFiltes are used because it's the only way to achieve AND + OR query for some attributes. They don't interfere with refinement list in my case. @Haroenv

  # (attribute1:value OR attribute2:value) AND attribute3:value 
  facetFilters: [['attribute1:value', 'attribute2:value'], 'attribute3:value']

[jsdmc]

parameters to configure should be updated with the props to the configure widget, as otherwise you will get into race conditions where the rendering tries to update the state back to what it was before the setIndexUiState call

Ended up with custom connectConfigure connector to be able to update configuration together with other parts of uiState

Marking as answered. Thanks @Haroenv , your insights helped.

[Haroenv]

For your second question, I just realised I misread what you're using and thought it was InstantSearch.js, but it doesn't change much about the code, so let me know if you have any issue with translating it to react, but the gist of it is:

1. setUiState can control page too, so you don't need to call loadMore yourself
2. careful with the infinite hits cache, the default in memory cache will invalidate when you change hitsPerPage. In the example I did that by making a custom cache based on the default sessionStorage cache, but you could base it on in-memory too of course

 function normalizeState(state: PlainSearchParameters) {
        // these parameters are not relevant for the cache
        const { page, hitsPerPage, ...rest } = state || {};
        return rest;
      }

      const KEY = 'ais.infiniteHits';

      function createCustomInfiniteHitsSessionStorageCache(): InfiniteHitsCache {
        function isEqual(a: any, b: any) {
          return JSON.stringify(a) === JSON.stringify(b);
        }
        return {
          read({ state }) {
            const sessionStorage =
              typeof window === 'object' && window.sessionStorage;

            if (!sessionStorage) {
              return null;
            }

            try {
              const cache = JSON.parse(
                // @ts-expect-error JSON.parse() requires a string, but it actually accepts null, too.
                sessionStorage.getItem(KEY)
              );

              return cache && isEqual(cache.state, normalizeState(state))
                ? cache.hits
                : null;
            } catch (error) {
              if (error instanceof SyntaxError) {
                try {
                  sessionStorage.removeItem(KEY);
                } catch (err) {
                  // do nothing
                }
              }
              return null;
            }
          },
          write({ state, hits }) {
            const sessionStorage =
              typeof window === 'object' && window.sessionStorage;

            if (!sessionStorage) {
              return;
            }

            try {
              sessionStorage.setItem(
                KEY,
                JSON.stringify({
                  state: normalizeState(state),
                  hits,
                })
              );
            } catch (error) {
              // do nothing
            }
          },
        };
      }

      const wrapper = document.createElement('div');
      container.append(wrapper);
      const el = document.createElement('div');
      wrapper.append(el);

      const uiState = search.getUiState();

      search.addWidgets([
        instantsearch.connectors.connectHitsPerPage(() => {})({
          items: [
            {
              value: 1,
              label: '1',
              default: (uiState.instant_search?.page! || 1) > 2,
            },
            {
              value: 2,
              label: '2',
              default: (uiState.instant_search?.page! || 1) <= 2,
            },
          ],
        }),
        instantsearch.widgets.infiniteHits({
          container: el,
          templates: {
            item: '{{name}}',
          },
          cache: createCustomInfiniteHitsSessionStorageCache(),
        }),
      ]);

      const button = document.createElement('button');
      button.textContent = 'Load more';
      button.addEventListener('click', () => {
        search.setUiState((state) => {
          const page = state.instant_search?.page || 1;
          return {
            ...state,
            instant_search: {
              ...state.instant_search,
              hitsPerPage: page === 1 ? 2 : 1,
              page: page + 1,
            },
          };
        });
      });
      wrapper.append(button);