Skip to content

Commit de00707

Browse files
samoussHaroenv
authored andcommitted
feat: introduce initialUiState option (#4074)
**Summary** This PR introduces the `initialUiState` option at the `InstantSearch` level. The option allows users to provide an `uiState` used for the initial request. Only for the **initial request**. I've chosen to name the option `initialXXX` rather than `uiState` to have a clear intent. At some point, we might want to introduce the concept of controlled state (like React InstantSearch) that could use the option `uiState`. At the moment the type definitions are incorrect. We have only one type that defines the `uiState` but we have to define two different types. The first is one is the "global" `uiState` and the second one is the "local" to each index. The "global" `uiState` is built on multiple "local" `uiState`. We'll update the definition in a separate PR. **Usage** ```js const search = instantsearch({ // ... initialUiState: { instant_search: { query: "Apple" }, instant_search_price_asc: { refinementList: { brand: ["Apple"] } } } }); ``` Checkout the example on [Storybook](https://deploy-preview-4074--instantsearchjs.netlify.com/stories/?path=/story/instantsearch--with-initialuistate).
1 parent 227a2cb commit de00707

File tree

8 files changed

+186
-66
lines changed

8 files changed

+186
-66
lines changed

src/lib/InstantSearch.ts

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -103,6 +103,14 @@ export type InstantSearchOptions<TRouteState = UiState> = {
103103
*/
104104
searchParameters?: PlainSearchParameters;
105105

106+
/**
107+
* Injects a `uiState` to the `instantsearch` instance. You can use this option
108+
* to provide an initial state to a widget. Note that the state is only used
109+
* for the first search. To unconditionally pass additional parameters to the
110+
* Algolia API, take a look at the `configure` widget.
111+
*/
112+
initialUiState?: UiState;
113+
106114
/**
107115
* Time before a search is considered stalled. The default is 200ms
108116
*/
@@ -139,6 +147,7 @@ class InstantSearch extends EventEmitter {
139147
public _searchStalledTimer: any;
140148
public _isSearchStalled: boolean;
141149
public _searchParameters: PlainSearchParameters;
150+
public _initialUiState: UiState;
142151
public _searchFunction?: InstantSearchOptions['searchFunction'];
143152
public _createURL?: (params: SearchParameters) => string;
144153
public _createAbsoluteURL?: (params: SearchParameters) => string;
@@ -151,7 +160,8 @@ class InstantSearch extends EventEmitter {
151160
const {
152161
indexName = null,
153162
numberLocale,
154-
searchParameters,
163+
searchParameters = {},
164+
initialUiState = {},
155165
routing = null,
156166
searchFunction,
157167
stalledSearchDelay = 200,
@@ -234,6 +244,7 @@ See ${createDocumentationLink({
234244
this._stalledSearchDelay = stalledSearchDelay;
235245
this._searchStalledTimer = null;
236246
this._isSearchStalled = false;
247+
this._initialUiState = initialUiState;
237248
this._searchParameters = {
238249
...searchParameters,
239250
index: indexName,
@@ -411,6 +422,7 @@ See ${createDocumentationLink({
411422
this.mainIndex.init({
412423
instantSearchInstance: this,
413424
parent: null,
425+
uiState: this._initialUiState,
414426
});
415427

416428
mainHelper.search();

0 commit comments

Comments
 (0)