How does it work?
The SearchComponent
class is a search component that can be used to bind with different kinds of search UI widgets. For example:
- a category filter component,
- a search bar component,
- a price range component,
- a location filter component,
- a component to render the search results.
Constructor
The constructor of the SearchComponent
class is called with the following properties:
const searchComponent = new SearchComponent(properties);
Properties
Configure appbase.io environment
index
Type | Optional |
---|---|
string |
No |
Refers to an index of the Elasticsearch cluster.
Note:
Multiple indexes can be connected to by specifying comma-separated index names.
url
Type | Optional |
---|---|
string |
No |
URL for the Elasticsearch cluster
credentials
Type | Optional |
---|---|
string |
No |
Basic Auth credentials if required for authentication purposes. It should be a string of the format username:password
. If you are using an appbase.io cluster, you will find credentials under the Security > API credentials
section of the appbase.io dashboard.
appbaseConfig
Type | Optional |
---|---|
Object |
Yes |
allows you to customize the analytics experience when appbase.io is used as a backend. It accepts an object which has the following properties:
- recordAnalytics
Boolean
allows recording search analytics (and click analytics) when set totrue
and appbase.io is used as a backend. Defaults tofalse
. - enableQueryRules
Boolean
Iffalse
, then appbase.io will not apply the query rules on the search requests. Defaults totrue
. - enableSearchRelevancy
Boolean
defaults totrue
. It allows you to configure whether to apply the search relevancy or not. - userId
string
It allows you to define the user id to be used to record the appbase.io analytics. Defaults to the client's IP address. - useCache
Boolean
This property when set allows you to cache the current search query. TheuseCache
property takes precedence irrespective of whether caching is enabled or disabled via the dashboard. - customEvents
Object
It allows you to set the custom events which can be used to build your own analytics on top of appbase.io analytics. Further, these events can be used to filter the analytics stats from the appbase.io dashboard. - enableTelemetry
Boolean
When set tofalse
, disable the telemetry. Defaults totrue
.
To configure the ReactiveSearch API
The following properties can be used to configure the appbase.io ReactiveSearch API:
id
Type | Optional |
---|---|
string |
No |
unique identifier of the component, can be referenced in other components' react
prop.
type
Type | Optional |
---|---|
string |
Yes |
This property represents the type of the query which is defaults to search
, valid values are search
, term
, range
& geo
. You can read more here.
dataField
Type | Optional |
---|---|
string | Array<string | DataField> |
No |
index field(s) to be connected to the component’s UI view. SearchComponent accepts an Array
in addition to string
, which is useful for searching across multiple fields with or without field weights.
Field weights allow weighted search for the index fields. A higher number implies a higher relevance weight for the corresponding field in the search results.
You can define the dataField
property as an array of objects of the DataField
type to set the field weights.
The DataField
type has the following shape:
type DataField = {
field: string;
weight: number;
};
enablePredictiveSuggestions
Type | Optional |
---|---|
bool |
Yes |
Defaults to false
. When set to true
, it predicts the next relevant words from a field's value based on the search query typed by the user. When set to false
(default), the entire field's value would be displayed. This may not be desirable for long-form fields (where average words per field value is greater than 4 and may not fit in a single line).
// pass this prop as true in searchComponent to enable predictive suggestions
enablePredictiveSuggestions: true,
value
Type | Optional |
---|---|
any |
Yes |
Represents the value for a particular query type. Depending on the query type, the value format would differ. You can refer to the different value formats over here.
queryFormat
Type | Optional |
---|---|
string |
Yes |
Sets the query format, can be or or and. Defaults to or.
- or returns all the results matching any of the search query text's parameters. For example, searching for "bat man" with or will return all the results matching either "bat" or "man".
- On the other hand with and, only results matching both "bat" and "man" will be returned. It returns the results matching all of the search query text's parameters.
react
Type | Optional |
---|---|
Object |
Yes |
react
prop is useful for components whose data view should reactively update when on or more dependent components change their states, e.g. a component to display the results can depend on the search component to filter the results.
- key
string
one ofand
,or
,not
defines the combining clause.- and clause implies that the results will be filtered by matches from all of the associated component states.
- or clause implies that the results will be filtered by matches from at least one of the associated component states.
- not clause implies that the results will be filtered by an inverse match of the associated component states.
- value
string or Array or Object
string
is used for specifying a single component by itsid
.Array
is used for specifying multiple components by theirid
.Object
is used for nesting other key clauses.
An example of a react
clause where all three clauses are used and values are Object
, Array
and string
.
const resultComponent = new SearchComponent({
react: {
and: {
or: ['CityComp', 'TopicComp'],
not: 'BlacklistComp',
},
},
});
Here, we are specifying that the result component should update whenever one of the blacklist items is not present and simultaneously any one of the city or topics matches.
size
Type | Optional |
---|---|
number |
Yes |
Number of suggestions and results to fetch per request.
from
Type | Optional |
---|---|
number |
Yes |
To define from which page to start the results, it is important to implement pagination.
includeFields
Type | Optional |
---|---|
Array<string> |
Yes |
fields to be included in search results.
excludeFields
Type | Optional |
---|---|
Array<string> |
Yes |
fields to be excluded in search results.
sortBy
Type | Optional |
---|---|
string |
Yes |
sort the results by either asc
or desc
order. The count
option can also be used to filter the aggregations based on count
if the query type is as term
.
aggregationField
Type | Optional |
---|---|
string |
Yes |
One of the most important use-cases this enables is showing DISTINCT
results (useful when you are dealing with sessions, events, and logs type data).
It utilizes composite aggregations
which are newly introduced in ES v6 and offer vast performance benefits over a traditional terms aggregation.
You can read more about it over here.
You can use aggregationData
using onAggregationData
callback or subscriber
.
const component = new SearchComponent({
index: 'good-book-ds-latest',
url: 'https://scalr.api.appbase.io',
credentials: 'IPM14ICqp:8e573e86-8802-4a27-a7a1-4c7d0c62c186',
dataField: 'original_title',
aggregationField: 'original_title.keyword',
});
// using callback
component.onAggregationData(next, prev) {}
// using subscriber
component.subscribeToStateChanges(
({ changes }) => {
console.log("Aggregations =>", changes.aggregationData.next);
},
'aggregationData'
);
- aggregationSize
To set the number of buckets to be returned by aggregations.
Note: This is a new feature and only available for appbase versions >= 7.41.0.
highlight
Type | Optional |
---|---|
boolean |
Yes |
whether highlighting should be enabled in the returned results.
highlightField
Type | Optional |
---|---|
string or Array |
Yes |
when highlighting is enabled, this prop allows specifying the fields which should be returned with the matching highlights. When not specified, it defaults to applying highlights on the field(s) specified in the dataField prop.
customHighlight
Type | Optional |
---|---|
Object |
Yes |
It can be used to set the custom highlight settings. You can read the Elasticsearch
docs for the highlight options at here.
categoryField
Type | Optional |
---|---|
string |
Yes |
Data field which has the category values mapped.
categoryValue
Type | Optional |
---|---|
string |
Yes |
This is the selected category value. It is used for informing the search result.
nestedField
Type | Optional |
---|---|
string |
Yes |
set the nested
field path that allows an array of objects to be indexed in a way that can be queried independently of each other. Applicable only when dataField's mapping is of nested
type.
fuzziness
Type | Optional |
---|---|
string | number |
Yes |
Set a maximum edit distance on the search parameters, which can be 0, 1, 2, or "AUTO". This is useful for showing the correct results for an incorrect search parameter by taking the fuzziness into account. For example, with a substitution of one character, the fox can become a box. Read more about it in the elastic search docs
enableSynonyms
Type | Optional |
---|---|
boolean |
Yes |
This property can be used to control (enable/disable) the synonyms behavior for a particular query. Defaults to true
, if set to false
then fields having .synonyms
suffix will not affect the query.
searchOperators
Type | Optional |
---|---|
boolean |
Yes |
Defaults to false
. If set to true
, then you can use special characters in the search query to enable the advanced search.
Read more about it here.
queryString
Type | Optional |
---|---|
boolean |
Yes |
Defaults to false
. If set to true
than it allows you to create a complex search that includes wildcard characters, searches across multiple fields, and more. Read more about it here.
pagination
Type | Optional |
---|---|
boolean |
Yes |
This property allows you to implement the pagination
for term
type of queries. If pagination
is set to true
then appbase will use the composite aggregations of Elasticsearch instead of terms aggregations.
after
Type | Optional |
---|---|
Object |
Yes |
This property can be used to implement the pagination for aggregations
. We use the composite aggregations of Elasticsearch
to execute the aggregations' query, the response of composite aggregations includes a key named after_key
which can be used to fetch the next set of aggregations for the same query. You can read more about the pagination for composite aggregations at here.
You need to define the after
property in the next request to retrieve the next set of aggregations.
showMissing
Type | Optional |
---|---|
boolean |
Yes |
Defaults to false
. When set to true
then it also retrieves the aggregations for missing fields.
missingLabel
Type | Optional |
---|---|
string |
Yes |
Defaults to N/A
. It allows you to specify a custom label to show when showMissing is set to true
.
includeNullValues
Type | Optional |
---|---|
boolean |
Yes |
If you have sparse data or documents or items not having the value in the specified field or mapping, then this prop enables you to show that data.
interval
Type | Optional |
---|---|
number |
Yes |
To set the histogram bar interval, applicable when aggregations value is set to ["histogram"]
. Defaults to Math.ceil((range.end - range.start) / 100) || 1
.
aggregations
Type | Optional |
---|---|
Array<string> |
Yes |
It helps you to utilize the built-in aggregations for range
type of queries directly, valid values are:
max
: to retrieve the maximum value for adataField
,min
: to retrieve the minimum value for adataField
,histogram
: to retrieve the histogram aggregations for a particularinterval
selectAllLabel
Type | Optional |
---|---|
string |
Yes |
This property allows you to add a new property in the list with a particular value in such a way that when selected i.e value
is similar/contains to that label(selectAllLabel
) then term
query will make sure that the field
exists in the results
.
To configure the AutoSuggestions
enablePopularSuggestions
Type | Optional |
---|---|
boolean |
Yes |
Defaults to false
. When enabled, it can be useful to curate search suggestions based on actual search queries that your users are making. Read more about it over here.
showDistinctSuggestions
Type | Optional |
---|---|
boolean |
Yes |
Show 1 suggestion per document. If set to false
multiple suggestions may show up for the same document as the searched value might appear in multiple fields of the same document, this is true only if you have configured multiple fields in dataField
prop. Defaults to true
.
Example if you have showDistinctSuggestions
is set to false
and have the following configurations
// Your document:
{
"name": "Warn",
"address": "Washington"
}
// SearchComponent:
dataField=['name', 'address']
// Search Query:
"wa"
Then there will be 2 suggestions from the same document
as we have the search term present in both the fields
specified in dataField
.
Warn
Washington
To configure the query execution
headers
Type | Optional |
---|---|
Object |
Yes |
set custom headers to be sent with each server request as key/value pairs. For example:
const component = new SearchComponent({
index: 'gitxplore-app',
url: 'https://@arc-cluster-appbase-demo-6pjy6z.searchbase.io',
credentials: 'a03a1cb71321:75b6603d-9456-4a5a-af6b-a487b309eb61',
headers: {
secret: 'searchbase-is-awesome',
},
});
transformRequest
Type | Optional |
---|---|
(requestOptions: Object) => Promise<Object> |
Yes |
Enables transformation of network request before execution. This function will give you the request object as the param and expect an updated request in return, for execution.
For example, we will add the credentials
property in the request using transformRequest
.
const component = new SearchComponent({
index: 'gitxplore-app',
url: 'https://@arc-cluster-appbase-demo-6pjy6z.searchbase.io',
credentials: 'a03a1cb71321:75b6603d-9456-4a5a-af6b-a487b309eb61',
transformRequest: request =>
Promise.resolve({
...request,
credentials: include,
}),
});
transformResponse
Type | Optional |
---|---|
(response: any) => Promise<any> |
Yes |
Enables transformation of search network response before rendering them. It is an asynchronous function which will accept an Elasticsearch response object as param and is expected to return an updated response as the return value.
For example:
const component = new SearchComponent({
index: 'gitxplore-app',
url: 'https://@arc-cluster-appbase-demo-6pjy6z.searchbase.io',
credentials: 'a03a1cb71321:75b6603d-9456-4a5a-af6b-a487b309eb61',
transformResponse: async elasticsearchResponse => {
const ids = elasticsearchResponse.hits.hits.map(item => item._id);
const extraInformation = await getExtraInformation(ids);
const hits = elasticsearchResponse.hits.hits.map(item => {
const extraInformationItem = extraInformation.find(
otherItem => otherItem._id === item._id,
);
return {
...item,
...extraInformationItem,
};
});
return {
...elasticsearchResponse,
hits: {
...elasticsearchResponse.hits,
hits,
},
};
},
});
Note
transformResponse
function is expected to return data in the following structure.
{
// Elasticsearch hits response
hits: {
hits: [...],
total: 100
},
// Elasticsearch aggregations response
aggregations: {
}
took: 1
}
defaultQuery
Type | Optional |
---|---|
(component: SearchComponent) => Object |
Yes |
is a callback function that takes the SearchComponent
instance as parameter and returns the data query to be applied to the source component, as defined in Elasticsearch Query DSL, which doesn't get leaked to other components. In simple words, defaultQuery
is used with data-driven components to impact their own data. It is meant to modify the default query which is used by a component to render the UI.
Some of the valid use-cases are:
- To modify the query to render the
suggestions
orresults
insearch
type of components. - To modify the
aggregations
interm
type of components.
For example, in a term
type of component showing a list of cities, you may only want to render cities belonging to India.
const component = new SearchComponent({
index: 'gitxplore-app',
url: 'https://@arc-cluster-appbase-demo-6pjy6z.searchbase.io',
credentials: 'a03a1cb71321:75b6603d-9456-4a5a-af6b-a487b309eb61',
defaultQuery: () => ({
query: {
terms: {
country: ['India'],
},
},
}),
});
customQuery
Type | Optional |
---|---|
(component: SearchComponent) => Object |
Yes |
takes SearchComponent
instance as parameter and returns the query to be applied to the dependent components by react
prop, as defined in Elasticsearch Query DSL.
For example, the following example has two components search-component
(to render the suggestions) and result-component
(to render the results). The result-component
depends on the search-component
to update the results based on the selected suggestion. The search-component
has the customQuery
prop defined that will not affect the query for suggestions(that is how customQuery
is different from defaultQuery
) but it'll affect the query for result-component
because of the react
dependency on search-component
.
const searchBase = new SearchBase({
index: 'gitxplore-app',
url: 'https://@arc-cluster-appbase-demo-6pjy6z.searchbase.io',
credentials: 'a03a1cb71321:75b6603d-9456-4a5a-af6b-a487b309eb61',
});
searchBase.register('search-component', {
customQuery: () => ({
timeout: '1s',
query: {
match_phrase_prefix: {
fieldName: {
query: 'hello world',
max_expansions: 10,
},
},
},
}),
});
searchBase.register('result-component', {
react: {
and: ['search-component'],
},
});
Miscellaneous
beforeValueChange
Type | Optional |
---|---|
(value: string) => Promise<any> |
Yes |
is a callback function which accepts the component's future value as a parameter and returns a promise. It is called every time before a component's value changes. The promise, if and when resolved, triggers the execution of the component's query and if rejected, kills the query execution. This method can act as a gatekeeper for query execution since it only executes the query after the provided promise has been resolved.
For example:
const component = new SearchComponent({
index: 'gitxplore-app',
url: 'https://@arc-cluster-appbase-demo-6pjy6z.searchbase.io',
credentials: 'a03a1cb71321:75b6603d-9456-4a5a-af6b-a487b309eb61',
beforeValueChange: value =>
function(value) {
// called before the value is set
// returns a promise
return new Promise((resolve, reject) => {
// update state or component props
resolve();
// or reject()
});
},
});
An example with all properties
const component = new SearchComponent({
index: 'gitxplore-app',
url: 'https://@arc-cluster-appbase-demo-6pjy6z.searchbase.io',
credentials: 'a03a1cb71321:75b6603d-9456-4a5a-af6b-a487b309eb61',
appbaseConfig: {
recordAnalytics: true,
enableQueryRules: true,
userId: 'jon@appbase.io',
customEvents: {
platform: "ios",
device: "iphoneX"
}
},
headers: {
secret: "searchbase-is-awesome",
},
id: 'search-component',
type: 'search',
highlight: true,
highlightFields: ["original_title", "original_title.raw"],
value: "",
fuzziness: "AUTO",
searchOperators: true,
queryFormat: "or",
size: 10,
from: 0,
dataField: "original_title",
includeFields: ["*"],
excludeFields: [],
sortBy: "asc",
nestedField: "",
transformRequest: (request) => Promise.resolve({
...request,
credentials: "true"
}),
transformResponse: response => Promise.resolve({
...response,
hits: {
...response.hits,
hits: [
{
_id: "promoted",
_source: {
original_title: "Harry potter and the cursed child"
}
},
...response.hits
]
}
}),
beforeValueChange: value => new Promise((resolve, reject) => {
if(/[^a-zA-Z0-9]/.test(value)) {
resolve(value)
} else {
reject('Special characters not allowed.')
}
}),
})
Getter properties
These properties are automatically calculated or managed by the SearchBase
class. The library user is not expected to modify these properties.
results
Type | Optional |
---|---|
Results |
Yes |
It is an object which contains the following details of results
query response.
data
:Array<Object>
contains the (promoted data + parsed hits)raw
:Object
Response returned by ES query in the raw form.numberOfResults
:number
Total number of results foundtime
:number
Total time taken by request (in ms)hidden
:number
Total number of hidden results foundpromoted
:number
Total number of promoted results foundpromotedData
:Array<Object>
An array of promoted results obtained from the applied query.customData
:Object
An object of custom data obtained from thereactivesearch-v3
API.rawData
:Object
An object of raw response as-is from elasticsearch query.
aggregationData
Type | Optional |
---|---|
Aggregations |
Yes |
It is an object which contains the following details of aggregations
query response.
data
:Array<Object>
contains the parsed aggregationsraw
:Object
Response returned by EScomposite aggs
query in the raw form.rawData
:Object
An object of raw response as-is from elasticsearch query.afterKey
:Object
If the number of composite buckets is too high (or unknown) to be returned in a single response use theafterKey
parameter to retrieve the next results. This property will only be present forcomposite
aggregations.
suggestions
Type | Optional |
---|---|
() => Array<Object> |
Yes |
This method can be used to get the parsed suggestions from the results
. If enablePopularSuggestions
property is set to true
then the popular suggestions will get appended at the top with a top-level property named _popular_suggestion
as true
. The suggestion
object will have the following shape:
{
label: string;
value: string;
source: Object;
}
query
Type | Optional |
---|---|
Object |
Yes |
The last query that has been executed
requestPending
Type | Optional |
---|---|
boolean |
Yes |
Useful for getting the status of the API, whether it has been executed or not
requestStatus
Type | Optional |
---|---|
string |
Yes |
Represents the current state of the request, can have values as INACTIVE
, PENDING
or ERROR
.
micStatus
Type | Optional |
---|---|
MicStatusField |
Yes |
Returns the current status of the mic. Can be INACTIVE
, ACTIVE
or DENIED
micActive
Type | Optional |
---|---|
boolean |
Yes |
Returns true
if mic is active
micInactive
Type | Optional |
---|---|
boolean |
Yes |
Returns true
if mic is inactive
micDenied
Type | Optional |
---|---|
boolean |
Yes |
Returns true
if it doesn't have access to the mic
- micInstance
Returns the current mic instance. Can be used to set mic language and other properties of mic
Setters
Note: All of the methods accept options as the second parameter which has the following shape:
{
triggerDefaultQuery?: boolean, // defaults to `true`
triggerCustomQuery?: boolean, // defaults to `false`
stateChanges?: boolean // defaults to `true`
};
- triggerDefaultQuery
true
executes the query for a particular component - triggerCustomQuery
true
executes the query for the dependent components (dependencies defined in thereact
property) - stateChanges
true
invokes the subscribed functions tosubscribeToStateChanges
method, i.e trigger the re-render after making changes
The following methods of SearchComponent
class can be used to set or update the search properties:
setHeaders
Type | Optional |
---|---|
(headers: Object, options?: Options) => void |
Yes |
can be used to set the headers
property
setSize
Type | Optional |
---|---|
(size: number, options?: Options) => void |
Yes |
can be used to set the size
property
setFrom
Type | Optional |
---|---|
(from: number, options?: Options) => void |
Yes |
can be used to set the from
property, which is useful while implementing pagination
setAfter
Type | Optional |
---|---|
(after: object, options?: Options) => void |
Yes |
can be used to set the after
property, which is useful while implementing pagination when the type
of the component is term
. The after
key is a a property of aggregationData
.
setFuzziness
Type | Optional |
---|---|
(fuzziness: number | string, options?: Options) => void |
Yes |
can be used to set the fuzziness
property
setIncludeFields
Type | Optional |
---|---|
(includeFields: Array<string>, options?: Options) => void |
Yes |
can be used to set the includeFields
property
setExcludeFields
Type | Optional |
---|---|
(excludeFields: Array<string>, options?: Options) => void |
Yes |
can be used to set the excludeFields
property
setSortBy
Type | Optional |
---|---|
(sortBy: string, options?: Options) => void |
Yes |
can be used to set the sortBy
property
setSortByField
Type | Optional |
---|---|
(sortByField: string, options?: Options) => void |
Yes |
can be used to set the sortByField
property
setNestedField
Type | Optional |
---|---|
(nestedField: string, options?: Options) => void |
Yes |
can be used to set the nestedField
property
setDataField
Type | Optional |
---|---|
( dataField: string | Array<string | DataField>, options?: Options ) => void |
Yes |
can be used to set the dataField
property
setResults
Type | Optional |
---|---|
(results: Array<Object>, options?: Option) => void |
Yes |
can be used to set the custom results
setValue
Type | Optional |
---|---|
(value: string, options?: Options) => void |
Yes |
can be used to set the value
property
setCategoryValue
Type | Optional |
---|---|
(categoryValue: string, options?: Options) => void |
Yes |
can be used to set the categoryValue
property.
setReact
Type | Optional |
---|---|
(react: Object, options?: types.Options): void |
Yes |
can be used to set the react
property
setDefaultQuery
Type | Optional |
---|---|
( defaultQuery: (component: SearchComponent) => void, options?: types.Options ): void |
Yes |
can be used to set the default query
setCustomQuery
Type | Optional |
---|---|
( defaultQuery: (component: SearchComponent) => void, options?: types.Options ): void |
Yes |
can be used to set the custom query
Callback of change events
You can define the callback of the following event to listen for the search state changes. The callback function accepts the updated value as the first param and the previous value as the second param. These callback functions may be used in the following scenarios:
- Perform side-effects e.g. make a network request,
- Update the UI. However, it is recommended to use the
subscribeToStateChanges
to update the UI which usesSearchComponent
properties.
onValueChange
Type | Optional |
---|---|
(next: string, prev: string) => void |
Yes |
can be used to listen for the `value` property changes. <br/>
const component = new SearchComponent({
index: 'gitxplore-app',
url: 'https://@arc-cluster-appbase-demo-6pjy6z.searchbase.io',
credentials: 'a03a1cb71321:75b6603d-9456-4a5a-af6b-a487b309eb61',
});
component.onValueChange = (nextValue, prevValue) => {
// do something with the updated or previous values
};
onResults
can be used to listen for the results
property changes
onAggregationData
can be used to listen for the aggregationData
property changes
const component = new SearchComponent({
index: 'gitxplore-app',
url: 'https://@arc-cluster-appbase-demo-6pjy6z.searchbase.io',
credentials: 'a03a1cb71321:75b6603d-9456-4a5a-af6b-a487b309eb61',
type: 'term',
dataField: 'category.keyword',
});
// using callback
component.onAggregationData(next, prev) {}
onError
Type | Optional |
---|---|
(error: any) => void |
Yes |
called when there is an error while fetching results
onRequestStatusChange
Type | Optional |
---|---|
(next: string, prev: string) => void |
Yes |
called when request status changes
onQueryChange
Type | Optional |
---|---|
(next: string, prev: string) => void |
Yes |
called when query changes
onMicStatusChange
Type | Optional |
---|---|
(next: string, prev: string) => void |
Yes |
called when mic status changes
Execute queries
The following methods can be used to trigger the queries for components.
triggerDefaultQuery
Type | Optional |
---|---|
(options?: types.Option): Promise<any> |
Yes |
This method can be used to execute the default query for a particular component. For examples,
- to display the
suggestions
orresults
for asearch
type of component, - to display the filter options(
aggregations
) for aterm
type of component
triggerCustomQuery
Type | Optional |
---|---|
(options?: types.Option): Promise<any> |
Yes |
This method can be used to execute queries for the dependent components.
Subscribe to the properties changes
Although we have callbacks for change events that can be used to update the UI based on particular property changes, the subscribeToStateChanges
method gives you more control over the UI rendering logic and is more efficient.
How does it work?
- This method is controlled by the
stateChanges
property which can be defined in the setters while updating a particular property. IfstateChanges
is set totrue
, then only the subscribed functions will be called, unlike events callback which gets called every time when a property changes its value.
So basically,subscribeToStateChanges
provides more control over the event's callback in a way that you can define whether to update the UI or not while setting a particular property's value. - You can define the properties for which you want to update the UI.
- It allows you to register multiple callback functions for search state updates.
Usage
subscribeToStateChanges(
fn: Function,
propertiesToSubscribe?: string | Array<string>
): void
You can use the subscribeToStateChanges
method of SearchComponent
class to subscribe to the state changes of the properties.
A common use-case is to subscribe to a component or DOM element to a particular property or a set of properties & update the UI according to the changes.
The callback function accepts an object in the following shape:
{
[propertyName]: { // property name for example, `results`
prev: any; // previous value of the property
next: any; // next value of the property
}
}
These are the properties that can be subscribed for the changes:
results
aggregationData
requestStatus
error
value
categoryValue
query
micStatus
dataField
size
from
fuzziness
includeFields
excludeFields
sortBy
react
defaultQuery
customQuery
Let's check this example to bind a React component with the results
property change.
import React from 'react';
class Results extends React.Component {
constructor(props) {
super(props);
this.state = {
results: []
}
this.component = new SearchComponent(config);
this.component.subscribeToStateChanges(this.stateChangeHandler, 'results');
}
stateChangeHandler = ({ results }) => {
console.log('prev value', results.prev);
console.log('next value', results.next);
// Update the component state based on the value changes
this.setState({
results: results.next
});
}
render() {
return (
<div id="results">
{this.state.results.map(result => <Results {..results} />)}
</div>
)
}
}
Unsubscribe to the properties changes
It is recommended to unsubscribe the callback functions after the component has been unmounted.
For example in React
, we can use the componentWillUnmount
life cycle method to unsubscribe to the changes.
componentWillUnmount() {
this.component.unsubscribeToStateChanges(this.stateChangeHandler);
}
Record Analytics
The SearchComponent
class provides the methods to record clicks and conversions for search results.
recordClick
Type | Optional |
---|---|
(clickObjects: Object, isSuggestionClick: boolean = false) => void |
Yes |
Enables recording click analytics of a search request. Pass isSuggestionClick=true
, if you want to record a suggestion click.
const component = new SearchComponent({
index: 'good-book-ds',
url: 'https://arc-cluster-appbase-demo-ps1pgt.component.io',
credentials: 'a03a1cb71321:75b6603d-9456-4a5a-af6b-a487b309eb61',
appbaseConfig: {
recordAnalytics: true,
enableQueryRules: true,
},
dataField: 'original_title',
});
// using recordClick
component.recordClick({ 'cf827a07-60a6-43ef-ab93-e1f8e1e3e1a8': 2 }, true);
Here cf827a07-60a6-43ef-ab93-e1f8e1e3e1a8
is the ES docId and 2
is the click position.
recordConversions
Type | Optional |
---|---|
(conversionObjects: Array<string>) => void |
Yes |
Enables recording a search conversion.
const component = new SearchComponent({
index: 'good-book-ds',
url: 'https://arc-cluster-appbase-demo-ps1pgt.searchbase.io',
credentials: 'a03a1cb71321:75b6603d-9456-4a5a-af6b-a487b309eb61',
appbaseConfig: {
recordAnalytics: true,
enableQueryRules: true,
},
dataField: 'original_title',
});
// using recordConversions
component.recordConversions(['cf827a07-60a6-43ef-ab93-e1f8e1e3e1a8']);
Here cf827a07-60a6-43ef-ab93-e1f8e1e3e1a8
is the ES docId.