How to use the @appbaseio/reactivecore/lib/utils/helper.getQueryOptions function in @appbaseio/reactivecore

SingleList.prototype.componentDidMount = function componentDidMount() {
		var _queryOptions$aggs;

		this.props.addComponent(this.internalComponent);
		this.props.addComponent(this.props.componentId);
		this.setReact(this.props);

		var queryOptions = getQueryOptions(this.props);
		queryOptions.aggs = (_queryOptions$aggs = {}, _queryOptions$aggs[this.props.dataField] = {
			terms: {
				field: this.props.dataField,
				size: 100,
				order: getAggsOrder(this.props.sortBy)
			}
		}, _queryOptions$aggs);
		this.props.setQueryOptions(this.internalComponent, queryOptions);
		// Since the queryOptions are attached to the internal component,
		// we need to notify the subscriber (parent component)
		// that the query has changed because no new query will be
		// auto-generated for the internal component as its
		// dependency tree is empty
		this.props.updateQuery(this.internalComponent, null);

		if (this.props.defaultSelected) {

handleSortChange = (e) => {
		const index = e.target.value;
		const options = getQueryOptions(this.props);
		// This fixes issue #371 (where sorting a multi-result page with infinite loader breaks)
		options.from = 0;

		options.sort = [
			{
				[this.props.sortOptions[index].dataField]: {
					order: this.props.sortOptions[index].sortBy,
				},
			},
		];
		this.props.setQueryOptions(this.props.componentId, options, true);
		this.sortOptionIndex = index;

		this.setState(
			{
				currentPage: 0,

static generateQueryOptions = (props) => {
		// simulate default (includeFields and excludeFields) props to generate consistent query
		const options = getQueryOptions({ includeFields: ['*'], excludeFields: [], ...props });
		options.from = props.currentPage ? (props.currentPage - 1) * (props.size || 10) : 0;
		options.size = props.size || 10;

		if (props.sortOptions) {
			options.sort = [
				{
					[props.sortOptions[0].dataField]: {
						order: props.sortOptions[0].sortBy,
					},
				},
			];
		} else if (props.sortBy) {
			options.sort = [
				{
					[props.dataField]: {
						order: props.sortBy,

componentDidMount() {
		this.props.addComponent(this.internalComponent);
		this.props.addComponent(this.props.componentId);

		if (this.props.stream) {
			this.props.setStreaming(this.props.componentId, true);
		}

		const options = getQueryOptions(this.props);
		options.from = this.state.from;
		if (this.props.sortBy) {
			options.sort = [
				{
					[this.props.dataField]: {
						order: this.props.sortBy,
					},
				},
			];
		}

		this.defaultQuery = null;
		if (this.props.defaultQuery) {
			this.defaultQuery = this.props.defaultQuery();
			// Override sort query with defaultQuery's sort if defined
			if (this.defaultQuery.sort) {

setPage = (page) => {
		const value = this.props.size * page;
		const options = getQueryOptions(this.props);
		options.from = this.state.from;
		this.setState({
			from: value,
			isLoading: true,
			currentPage: page,
		});
		this.props.loadMore(
			this.props.componentId,
			{
				...options,
				from: value,
			},
			false,
		);

		if (this.props.URLParams) {

componentWillReceiveProps(nextProps) {
		if (
			!isEqual(this.props.sortOptions, nextProps.sortOptions)
			|| this.props.sortBy !== nextProps.sortBy
			|| this.props.size !== nextProps.size
			|| !isEqual(this.props.dataField, nextProps.dataField)
			|| !isEqual(this.props.includeFields, nextProps.includeFields)
			|| !isEqual(this.props.excludeFields, nextProps.excludeFields)
		) {
			const options = getQueryOptions(nextProps);
			options.from = this.state.from;
			if (nextProps.sortOptions) {
				options.sort = [
					{
						[nextProps.sortOptions[0].dataField]: {
							order: nextProps.sortOptions[0].sortBy,
						},
					},
				];
			} else if (nextProps.sortBy) {
				options.sort = [
					{
						[nextProps.dataField]: {
							order: nextProps.sortBy,
						},
					},

static generateQueryOptions(props, after) {
		const queryOptions = getQueryOptions(props);
		return props.showLoadMore
			? getCompositeAggsQuery(queryOptions, props, after)
			: getAggsQuery(queryOptions, props);
	}

loadMore = () => {
		if (this.props.aggregationField && !this.props.afterKey) return;
		if (this.props.hits && this.props.total !== this.props.hits.length) {
			const value = this.state.from + this.props.size;
			const options = { ...getQueryOptions(this.props), ...this.getAggsQuery() };
			this.setState({
				from: value,
			});
			this.props.loadMore(
				this.props.componentId,
				{
					...options,
					from: value,
				},
				true,
				!!this.props.aggregationField,
			);
		}
	};

updateQueryOptions = (props) => {
		const queryOptions = getQueryOptions(props);
		queryOptions.size = 0;
		queryOptions.aggs = {
			[props.dataField]: {
				terms: {
					field: props.dataField,
					size: props.size,
					order: getAggsOrder(props.sortBy || 'count'),
				},
			},
		};
		props.setQueryOptions(this.internalComponent, queryOptions);
	};

loadMore = () => {
		if (
			this.props.hits
			&& !this.props.pagination
			&& this.props.total !== this.props.hits.length
		) {
			const value = this.state.from + this.props.size;
			const options = getQueryOptions(this.props);

			this.setState({
				from: value,
			});
			this.props.loadMore(
				this.props.componentId,
				{
					...options,
					from: value,
				},
				true,
			);
		}
	};