ReactiveSearch how to stop initial query on load - react-native

Question

So I've got ReactiveSearch working fine but I've noticed on the initial load it performs a query to fetch items - given my index will have perhaps a million items in it I'd ideally like to turn this off and only return results from the autosuggest?
<ReactiveBase
app="tths-shop-items"
url="my-es-cluster"
credentials="user:password"
>
<ScrollView>
<View style={styles2.container}>
<DataSearch
componentId="searchbox"
dataField={[
'name'
]}
placeholder="Search"
/>
<ReactiveList
componentId="results"
dataField="name"
size={7}
showResultStats={true}
pagination={true}
react={{
and: "searchbox"
}}
onData={(res) => {
return (
<View style={styles2.result}>
<Image source={{ uri: res.image.replace('http', 'https') }} style={styles2.image} />
<View style={styles2.item}>
<Text style={styles2.title}>{res.name}</Text>
</View>
</View>
)}
}
/>
</View>
</ScrollView>
</ReactiveBase>
EDIT
I also tried adding the default value in order to try and stop the initial query returning data. But it doesn't seem to work as expected.
defaultValue="3245423 kjhkjhkj 2kj34h12jkh 213k4jh12"
EDIT 2:
I've also tried defaultQuery in the following format and added it to the reactiveList and dataSearch components this gives me an error which is undefined is not an object 'this.defaultQuery.sort' - if I add sort to both queries it makes no difference:
defaultQuery={() =>
{
query: {
match_none: {}
}
}
}

Answer 1

I know it's an old question, but I stumbled upon the same problem.
My solution looks a little bit different - with the onQueryChange prop.
onQueryChange={
function(prevQuery, nextQuery) {
if ('match_all' in nextQuery['query']) {
nextQuery['query'] = { match_none: {} }
}
}
}
This will disable the ResultList with all results showing and only show results after you've selected any filter or entered a search term.

Answer 2

So here's one answer, you store the value that you click via the searchbox in state and then fiddle with the defaultQuery from there. Note default query does match_none: {} if there's no search text.
It's a bit inefficient as you still do a query that returns nothing, but it works - I'll leave this question open to give any better answers time to come up.
<ScrollView>
<View style={styles.mainContainer}>
<DataSearch
componentId="searchbox"
dataField={[
'name'
]}
placeholder="Search"
queryFormat="and"
noInitialQuery={true}
onValueChange={(value) => {
if(value === ''){
this.setState({searchText: null})
}
}}
onValueSelected={(value, cause, source) => {
this.setState({searchText: value.value})
}
}
/>
<ReactiveList
componentId="results"
dataField="name"
size={7}
showResultStats={true}
pagination={true}
react={{
and: "searchbox"
}}
defaultQuery={()=> {
if(this.state.searchText !== null){
return {
query: {
match: {
name: this.state.searchText
}
}
}
} else {
return {
query: {
match_none: {}
}
}
}
}}
onData={(res) => {
return (
<View style={styles2.result}>
<Image source={{ uri: res.image.replace('http', 'https') }} style={styles2.image} />
<View style={styles2.item}>
<Text style={styles2.title}>{res.name}</Text>
</View>
</View>
)}
}
/>
</View>
</ScrollView>

Answer 3

The selected answer was very useful but I changed the defaultQuery to use the original query in the event a search term is present:
defaultQuery={()=> {
if(this.state.searchText !== null){
return {
}
} else {
return {
query: {
match_none: {}
}
}
}
}}