What function or method takes searchState and converts it to requests for api call?

[hadminh]

What function converts searchState to http_requests?

const searchState= {
    "sortBy": "hotels_index",
    "page": "1",
    "refinementList": {
        "Municipality": [
            "London"
        ]
    },
    "query": ""
}

const http_requests = [
    {
        "indexName": "hotels_index",
        "params": {
            "facetFilters": [
                [
                    "Municipality:London"
                ]
            ],
            "facets": [
                "Municipality"
            ],
            "highlightPostTag": "</ais-highlight-0000000000>",
            "highlightPreTag": "<ais-highlight-0000000000>",
            "hitsPerPage": 10,
            "maxValuesPerFacet": 1000,
            "page": 0,
            "query": "",
        }
    },
]

[hadminh]

I think the answer is here

[hadminh]

const algoliasearch = require("algoliasearch");
const algoliasearchHelper = require("algoliasearch-helper");
const requestBuilder = require("algoliasearch-helper/src/requestBuilder");
const client = algoliasearch("YourApplicationID", "YourSearchOnlyAPIKey");
const index = client.initIndex("YourIndexName");

const searchState = {
  range: {
    price: {
      min: 20,
      max: 3000,
    },
  },
  refinementList: {
    fruits: ["lemon", "orange"],
  },
  menu: {
    brands: "Sony",
  },
  query: "ora",
  page: 2,
};

const helper = algoliasearchHelper(client, index.indexName, {
  disjunctiveFacets: ["fruits"],
  facets: ["brands"],
  hitsPerPage: 10,
  page: searchState.page,
  numericFilters: [`price >= ${searchState.range.price.min}`, `price <= ${searchState.range.price.max}`],
  query: searchState.query,
});

if (searchState.refinementList && searchState.refinementList.fruits) {
  helper.addDisjunctiveFacetRefinement("fruits", searchState.refinementList.fruits);
}

if (searchState.menu && searchState.menu.brands) {
  helper.addFacetRefinement("brands", searchState.menu.brands);
}

const request = helper.state.getQueryParams({});

console.log(request);
const queries = requestBuilder._getQueries(index, helper.state);

console.log(queries);

[Haroenv]

That's correct, but the translation from searchState to SearchParameters actually happens here:

instantsearch/packages/react-instantsearch-core/src/core/createInstantSearchManager.js

Lines 137 to 211 in 162341a

	function getSearchParameters() {
	const sharedParameters = widgetsManager
	.getWidgets()
	.filter((widget) => Boolean(widget.getSearchParameters))
	.filter(
	(widget) => !isMultiIndexContext(widget) && !isIndexWidget(widget)
	)
	.reduce(
	(res, widget) => widget.getSearchParameters(res),
	initialSearchParameters
	);
	const mainParameters = widgetsManager
	.getWidgets()
	.filter((widget) => Boolean(widget.getSearchParameters))
	.filter((widget) => {
	const targetedIndexEqualMainIndex =
	isMultiIndexContext(widget) &&
	isTargetedIndexEqualIndex(widget, indexName);
	const subIndexEqualMainIndex =
	isIndexWidget(widget) && isIndexWidgetEqualIndex(widget, indexName);
	return targetedIndexEqualMainIndex || subIndexEqualMainIndex;
	})
	// We have to sort the `Index` widgets first so the `index` parameter
	// is correctly set in the `reduce` function for the following widgets
	.sort(sortIndexWidgetsFirst)
	.reduce(
	(res, widget) => widget.getSearchParameters(res),
	sharedParameters
	);
	const derivedIndices = widgetsManager
	.getWidgets()
	.filter((widget) => Boolean(widget.getSearchParameters))
	.filter((widget) => {
	const targetedIndexNotEqualMainIndex =
	isMultiIndexContext(widget) &&
	!isTargetedIndexEqualIndex(widget, indexName);
	const subIndexNotEqualMainIndex =
	isIndexWidget(widget) && !isIndexWidgetEqualIndex(widget, indexName);
	return targetedIndexNotEqualMainIndex || subIndexNotEqualMainIndex;
	})
	// We have to sort the `Index` widgets first so the `index` parameter
	// is correctly set in the `reduce` function for the following widgets
	.sort(sortIndexWidgetsFirst)
	.reduce((indices, widget) => {
	const indexId = isMultiIndexContext(widget)
	? widget.props.indexContextValue.targetedIndex
	: widget.props.indexId;
	const widgets = indices[indexId] || [];
	return {
	...indices,
	[indexId]: widgets.concat(widget),
	};
	}, {});
	const derivedParameters = Object.keys(derivedIndices).map((indexId) => ({
	parameters: derivedIndices[indexId].reduce(
	(res, widget) => widget.getSearchParameters(res),
	sharedParameters
	),
	indexId,
	}));
	return {
	mainParameters,
	derivedParameters,
	};
	}

[hadminh]

Thank you for offering a better solution than my original one that relied on algoliasearch-helper.
Have you thought of providing a lower level api using a general standard state management tool like zustand/redux etc, instead of using algoliasearch-helper?

[Haroenv]

The searchState (UiState in modern React InstantSearch Hooks versions) should really be controlled by InstantSearch, making a change to it without notifying the widgets that actually own the parameters would not work efficiently.

However, useInstantSearch has a setUiState function that can be called freely, as well as the InstantSearch component having a onStateChange option (can also be done with a middleware). Both of those solutions are assuming React InstantSearch Hooks, as that's the modern version of React InstantSearch :)

What are you trying to achieve exactly by controlling the state?

[hadminh]

Almost every year, a new framework emerges, such as Remix, Svelt, SolidJS, React, Angular, or Vue. These frameworks continuously evolve, with Next.js being a prime example of significant improvement between versions 12 and 13. Considering this, I believe it's a wise choice to build the entire UI state within Zustand. What sets Zustand apart is its independence from the "DOM" and its framework-friendly nature. This means that even as the frameworks receive updates, I can still utilize Zustand independently, ensuring I stay up-to-date with the latest framework versions. This becomes especially important as these frameworks eventually phase out older versions and drop support.