How to map/transform search API data to Response state?

[ZakKa89]

Current situation

I have the following situation:

Frontend: NextJS with elastic/react-search-ui Backend: NodeJS GraphQL API connected to ElasticSearch with the javascript elastic API

So the data flow goes like this:

1. I use the onSearch callback in search-ui to initiate a search from my own GraphQL API 2.. GraphQL API Endpoint does a search with javascript API client.Search
2. This data is returned succesfully to my nextjs frontend, but the data is not what search-UI expects!

What Search UI expects (from my understanding)

Now I understand the response data needs to be formatted like this: https://docs.elastic.co/search-ui/api/core/state#response-state

What the data from the Search API looks like

I removed the hits, where the actual results are

{
    "results": {
      "took": 1,
      "timed_out": false,
      "_shards": {
        "total": 1,
        "successful": 1,
        "skipped": 0,
        "failed": 0
      },
      "hits": {
        "total": {
          "value": 53,
          "relation": "eq"
        },
        "max_score": 8.358131,
        "hits": []
      },
      "aggregations": {
        "productCatalog": {
          "doc_count_error_upper_bound": 0,
          "sum_other_doc_count": 0,
          "buckets": [
            {
              "key": "isense",
              "doc_count": 32
            },
            {
              "key": "tagging",
              "doc_count": 18
            },
            {
              "key": "id-cloud",
              "doc_count": 2
            }
          ]
        }
      }
    }

}

So what do I want?

I need to know how to map this data so that I can use search-UI with my own API .

[JasonStoltz]

We could benefit from more specific instructions, but you have the gist of it correct -- you'd need to map that into response state.

You could look at some of the existing connectors for examples: https://github.com/elastic/search-ui/blob/main/packages/search-ui-elasticsearch-connector/src/handlers/search/Response.ts#L5

The schema for ResponseState can be found here: https://github.com/elastic/search-ui/blob/851a6cdbaad176a42216fa112f48a202eb07ffec/packages/search-ui/src/types/index.ts#L94

[ZakKa89]

What the response state looks like is quite clear already, thank you.

I just don't see facets in my response (I got aggregations) from the javascript API, or other fields needed to map it into a working ResponseState.

that SearchkitResponse type has facets already. I don't have them :(

[ZakKa89]

I am coming to the conclusion that it's just not possible to set it up like this.

For anybody having the same question: I 'solved' (more of a workaround) this by skipping the javascript elastic API alltogether in between. I'm directly connecting to my ElasticSearch instance in a nextjs endpoint (like described in the docs here: https://docs.elastic.co/search-ui/guides/nextjs-integration

Edit:

What's also possible is put the connector in your backend instead of nextJS API