ReactiveSearch default query not enforced - react-native

Question

Trying to apply a default query in the reactive search component and it doesn't have an effect
import React from 'react';
import {
NavigationScreenProps,
NavigationScreenConfig, NavigationActions,
} from 'react-navigation';
import {
ChatHeader,
ChatHeaderNavigationStateParams,
} from '#src/components/messaging';
import {
Conversation,
} from '#src/core/model';
import {conversation5} from '#src/core/data/conversation';
import {StyleSheet, Text, Image, TouchableWithoutFeedback} from 'react-native';
import {
ReactiveBase,
DataSearch,
ReactiveList,
} from '#appbaseio/reactivesearch-native';
import {ScrollView, View} from 'react-native';
import {Icon, ListItem} from '#kitten/ui';
import LottieView from 'lottie-react-native';
import {SearchHeader} from '#src/components/search/search.header';
import {userProvider} from '../../../../domain/auth/UserProvider';
import {Screen} from '../../../../core/navigation/screens';
import Tts from 'react-native-tts';
import {StarIconOutline} from '#src/assets/icons';
import axios, {AxiosError, AxiosResponse} from 'axios';
import {Config} from '../../../../constants/Config';
import {User} from '#domain/models';
import DoubleClick from 'react-native-double-tap';
import {Notification} from 'react-native-in-app-message';
import AnimatedLoader from 'react-native-animated-loader';
interface State {
newMessageText: string;
conversation: Conversation;
isLoading: boolean;
message: string;
}
const styles = StyleSheet.create({
container: {
padding: 10,
marginTop: 25,
},
image: {
width: 100,
height: 100,
},
result: {
flexDirection: 'row',
width: '100%',
margin: 5,
alignItems: 'center',
},
notification: {
flexDirection: 'row',
width: '100%',
margin: 5,
padding: 5,
alignItems: 'flex-start',
},
item: {
flexDirection: 'column',
paddingLeft: 10,
},
title: {
fontWeight: 'bold',
},
lottie: {
width: 100,
height: 100,
},
iconx: {
width: 50,
height: 40,
marginLeft: -3,
marginBottom: -10,
padding: 5,
},
notificationText: {
marginTop: 11,
},
});
export class SearchContainer extends React.Component<NavigationScreenProps, State> {
private notification: Notification;
private token: string;
public state: State = {
newMessageText: '',
conversation: conversation5,
isLoading: false,
message: '',
};
private infiniteAnimationIconRef: React.RefObject<Icon> = React.createRef();
static navigationOptions: NavigationScreenConfig<any> = ({navigation, screenProps}) => {
const headerProps: ChatHeaderNavigationStateParams = {
interlocutor: navigation.getParam('interlocutor', conversation5.interlocutor),
lastSeen: navigation.getParam('lastSeen', 'today'),
onBack: navigation.getParam('onBack'),
onProfile: navigation.getParam('onProfile'),
};
const header = (navigationProps: NavigationScreenProps) => {
return (
<SearchHeader
{...navigationProps}
{...headerProps}
/>
);
};
return {...navigation, ...screenProps, header};
};
public async componentWillMount(): void {
this.props.navigation.setParams({
onBack: this.onBackPress,
});
await userProvider.get().then((data) => {
this.token = data.token;
}).catch(() => {
this.props.navigation.navigate(Screen.Login);
});
}
public componentDidMount() {
this.setState({
isLoading: false,
});
}
private onBackPress = (): void => {
this.props.navigation.goBack(null);
};
private say(deText): void {
Tts.setDefaultLanguage('de-DE');
Tts.setDucking(true);
Tts.speak(deText);
}
private star(id): void {
this.setState({isLoading: true});
axios.post(Config.service.stars.url, {
sentence_id: id,
}, {
headers: {
'Authorization': `Bearer ${this.token}`,
},
}).then((response: AxiosResponse<UserData>) => {
this.setState({message: 'Star added!'});
setTimeout(() => this.notification.show(), 100);
this.setState({isLoading: false});
}).catch((error: AxiosError) => {
let errorMessage = null;
try {
const code = error.response.request.status;
if (code === 401) {
this.props.navigation.navigate(Screen.Login);
} else if (code === 422) {
errorMessage = 'Star was added already for this sentence!';
} else {
errorMessage = 'Service is unavailable, please try again in a few!';
}
} catch (e) {
errorMessage = 'Service is unavailable, please try again in a few!';
}
this.setState({...this.state, message: errorMessage});
setTimeout(() => this.notification.show(), 100);
this.setState({isLoading: false});
});
}
public render(): React.ReactNode {
return (
<ReactiveBase
app='myapp'
url='http://xxx.xxxxxx.io'
headers={{'X-Api-Key': 'xxxxxxxxxxxxxxxxxxxxxxxxx'}}>
<View>
<DataSearch
componentId='searchbox'
dataField={[
'sentence',
'sentence.en',
'sentence.de',
'raw.translated',
]}
value='1'
highlight={true}
placeholder='words or expressions'
defaultQuery={() => ({
query: {
match: {
message: {
query: 'test',
},
},
},
})}
autosuggest={false}
/>
</View>
<Notification
customComponent={(
<View style={styles.notification}>
<LottieView
style={styles.iconx}
source={require('#src/animations/warning.json')}
colorFilters={[{
keypath: 'button',
color: '#F00000',
}, {
keypath: 'Sending Loader',
color: '#F00000',
}]}
autoPlay
loop={true}
/>
<Text style={styles.notificationText}>{this.state.message}</Text>
</View>
)}
ref={(c) => this.notification = c}
/>
<AnimatedLoader
visible={this.state.isLoading}
overlayColor='rgba(255,255,255,0.75)'
source={require('#src/animations/loader.json')}
animationStyle={styles.lottie}
speed={1}
/>
<ScrollView
stickyHeaderIndices={[1]}
nativeID={'scoller'}
>
<View>
<ReactiveList
componentId='results'
dataField='sentence.de'
size={7}
showResultStats={false}
pagination={true}
infiniteScroll={true}
scrollTarget={'scroller'}
react={{
and: 'searchbox',
}}
defaultValue={'Harry Potter'}
onData={(res, idx) => (
<View style={styles.result} key={res._id}>
<DoubleClick
singleTap={() => {
this.star(res._id);
}}
doubleTap={() => {
}}
delay={1000}
>
<Icon name='star-outline' fill='#FF9999' width='30' height='50'/>
</DoubleClick>
<ListItem
onPress={() => this.say(res.sentence.de)}
title={res.sentence.de}
description={res.raw.translated}
/>
</View>
)}
/>
</View>
</ScrollView>
</ReactiveBase>
);
}
}
<DataSearch
componentId='searchbox'
dataField={[
'sentence',
'sentence.en',
'sentence.de',
'raw.translated',
]}
value='1'
highlight={true}
placeholder='words or expressions'
defaultQuery={() => ({
query: {
match: {
message: {
query: 'test',
},
},
},
})}
autosuggest={false}
/>

Answer 1

Try this (i.e. use filter instead of should):
<ReactiveComponent
componentId='filterbox'
customQuery={props => ({
query: {
'bool': {
'filter': [{
'ids': {
'type': 'mydoctype',
'values': ['TK6IRm4BK9UoLvJay0OC', 'Ra6IRm4BK9UoLvJaykMD'],
},
}]
},
}
})}
/>