onData not working with ReactiveComponent

[DustinKLo]

Issue Type: Bug

Platform: Web

Description: the onData function is not working in ReactiveComponent

Reactivesearch version: 3.0.0-rc.15

<ReactiveComponent
  componentId={this.props.mapComponentId}
  URLParams={true}
  onData={(data, rawData, aggregations) => {
    console.log(data);
    console.log(rawData);
    console.log(aggregations);
  }}
  onQueryChange={(prev, next) => { console.log('Queries', prev, next); }}
  render={({ setQuery, value }) => {
    return (
      <MapComponent
        setQuery={setQuery}
        setPolygon={value}
        defaultZoom={this.props.defaultZoom}
        maxZoom={this.props.maxZoom}
        minZoom={this.props.minZoom}
      />
    );
  }}
></ReactiveComponent>

i've tried onData={(data, rawData, aggregations) => and onData={({data, rawData, aggregations})) => and neither work onQueryChange is not working either

[DustinKLo]

Is there any other way to pass the queried data into ReactiveComponent, i see that onData is deprecated.

[bietkul]

@DustinKLo It seems to work here. FYI, onData will only be triggered when you change the ReactiveComponent's defaultQuery (internal query), it won't be called when you use setQuery. It'll be triggered when you change the defaultQuery prop in ReactiveComponent.

[DustinKLo]

Can onData work with customQuery, i need the custom ReactiveComponent to also be able to further filter on the main Elasticsearch query DSL Examples I've found on defaultQuery looks like it doesn't touch the main query DSL

Is there a workaround so i can pass the query DSL into my custom component, since onQueryChange doesnt work either? thanks!

[bietkul]

Can onData work with customQuery, i need the custom ReactiveComponent to also be able to further filter on the main Elasticsearch query DSL

No, setQuery and customQuery does the same thing. You can use the react prop in your custom component, in that way it'll be affected by the ReactiveComponent's query.

For example,

<ReactiveComponent
  componentId="Reactive_Component"
  customQuery={() => ({
     query: {
         terms: "XYZ"
     }
  })}
/>

In your custom component you can use onData

<ReactiveList
  react={{ and: 'Reactive_Component'}}
  onData={(data) => { console.log(data); }}
/>

[DustinKLo]

Unfortunately i need to send the data to my ReactiveComponent, but thank you for clarifying is there any plans in the future to trigger onData with a customQuery?

[bietkul]

I can better help you if you can explain the use-case with some code sandbox example.

[DustinKLo]

That would be great thank you so much

On Mon, Jun 24, 2019, 1:08 AM Kuldeep Saxena notifications@github.com wrote:

I can better help you if you can explain the use-case with some code sandbox example.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/appbaseio/reactivesearch/issues/1025?email_source=notifications&email_token=ADGAT2OYTBZMEWVVOAYAU7LP4B6JTA5CNFSM4H22SPP2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODYMD6PY#issuecomment-504905535, or mute the thread https://github.com/notifications/unsubscribe-auth/ADGAT2MBXY4INAFCP52Q2WDP4B6JTANCNFSM4H22SPPQ .

[DustinKLo]

My use case is I'm using a leaflet map (https://react-leaflet.js.org/) and leaflet draw tools (https://github.com/alex3165/react-leaflet-draw) to create bounding boxes that allow to filter in elasticsearch. the map acts as both a ReactiveComponent and also displays map images on the leaflet map itself

[bietkul]

I think you just need to use the defaultQuery prop instead of setQuery in ReactiveComponent. Update the defaultQuery when you want to change the query and onData will work as you expect.

[DustinKLo]

thank you @bietkul i'll give it a shot

[DustinKLo]

I don't think defaultQuery works because it doesn't further filter my results based on the polygon, I can only use customQuery for this use case unfortunately, is there a workaround to maybe pass the entire query into my custom component?

[DustinKLo]

I found a workaround, create a function in the parent component which is passed into the <ReactiveList> component, retrieve the data and store it as a state and pass it into the custom <ReactiveComponent>

[bietkul]

It seems like an issue with the uses, so closing it for now. Feel free to re-open.