ReactiveSearch components can't see incoming data after upgrade from v3 to v4 - stuck in loading state

[psawamura]

Hi! We’re currently trying to upgrade reactive search from v3 to v4 with React.

To access our elastic search data we use the endpoint prop in the ReactiveBase component. In v3 this has worked for us with no problems. However with v4 we are not able to see the data through the ReactiveSearch components anymore.

In v4, once the request is sent we’re able to see the response in the network tab so we know our service is working fine but the ReactiveBase component, for some reason, cannot see the data coming through and therefore it hangs in an endless loading state.

We've tried inspecting the incoming response on ReactiveBase through the transformResponse prop and nothing is coming through. The same goes with other components like MultiList, ReactiveList, for which we've tried checking the incoming data through the onData props. The data is just not reaching the components.

We’ve compared the syntax and format of the required API payload between v3 and v4 and noticed that v3 only had arguments of Boolean type for the settings while v4 now has some attributes of String type. We've already made those changes in our service that serves the elastic data but we’re still not able to see any data through the UI components.

We are running out of ideas on how to make this new version work. Has anyone experienced the same issue or knows what could be going on here?

Thanks!

[siddharthlatest]

@psawamura The payload being sent is different in v3 and v4. The payload v4 sends captures the search intent but doesn't send the query DSL directly. To confirm this, you can check on the network request being made by the library.

Do you have ReactiveSearch API server setup to proxy the Elasticsearch traffic? You can set that either with the cloud service or per the instructions here: https://github.com/appbaseio/reactivesearch-api-docker.

[psawamura]

Hi @siddharthlatest, thanks for the quick response!

We have our own service to interact with Elastic Search, which acts as an intermediary that translates requests coming from the ReactiveSearch (RS) components with the RS format to Elastic format and vice-versa.

We've implemented several custom logics in this intermediary to support specific functionalities and data hydration for certain client components we've developed. However, the core question still stands: why is the new version of ReactiveSearch client unable to process the 200 OK response from the network call and transition the component from loading to displaying the data?

I've included an example of the network call and its output below for reference (Our backend engineer Prem can give you more details about our service if needed)

Request (from RS components):

{
  "settings": {},
  "query": [
    {
      "id": "component1",
      "type": "term",
      "dataField": [
       "field1"
      ],
      "execute": true,
      "react": {
         "and": "field1__internal"
      },
      "aggregationSize": 1,
      "index": "index"
    }
   ]
}

Response (sent to RS components from our service):

{
"component1": {
        "hits": {
            "total": {
                "value": 17048295
            }
        },
        "status": 200,
       
"aggregations": {
            "agg1": {
                "count": 1,
                "after": {
                    "data": "100000001"
                },
                "buckets": [
                    {
                        "key": "100000001",
                        "doc_count": 561621,
                        "label": "label1",
                    }
                ]
            }
        }
}

[kirankalyan5]

Hi @siddharthlatest, how would you advise here?