react-nativeelasticsearchreactivesearch

ReactiveSearch how to stop initial query on load


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: {}
                  }
                }
              }

Solution

  • 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>