How do you get it to make XHR requests?

[peterbe]

Perhaps I'm blind but, how do you actually use this? Like, how do you get it to actually trigger an XHR fetch?

I tried this (in a create-react-app):

function App() {
  return (
    <Elasticsearch url={"http://localhost:9200/myindex/_search"}>
      <SearchBox id="mainSearch" />
      <Facet id="tags" fields={["tags"]} />
      <Results
        id="result"
        items={(data) => data.map((item) => <>{item._source.title}</>)}
      />
    </Elasticsearch>
  );
}

That's more or less verbatim from the documentation. No XHR requests happen. At first, I thought it was a matter of CORS, so I set up one of those http-proxy-middleware things and that works fine now if I manually trigger a fetch('/myindex/_search').then(r => console.log(r)). At least I can see some XHR traffic between browser and server.

But what do I need to do to make it actually trigger fetch requests?

[peterbe]

I know this sounds like a question rather than an issue, but I'd really like to use the library. At least try it. But nothing happens. I can't imagine I'm the only one who can't get it to actually do something.

[johwacode]

Just found this library, which seems pretty nice, but I'm also having some issues in requesting my index.
On the one hand the Facets onChange-handler seems to send requests to my elasticsearch-server as soon as I change its value, but that won't update the ActiveFilters. On the other hand SearchBox updates the ActiveFilters-State, but does not send any requests at all.

[ghost]

I'm experiencing the same issue with the latest version.

[DaegiKim]

It works fine in the [email protected], but does not work well in the newer version.

[rap2hpoutre]

Sorry for the late answer! I just noticed something was missing in the Readme and something was broken in lib. I just resurrected it!

@peterbe Here is the code you could use (no need to add /_search on line 3, and you have to specify the fields in SearchBox on line 4):

function App() {
  return (
    <Elasticsearch url={"http://localhost:9200/myindex"}>
      <SearchBox id="mainSearch" fields={["title"]} />
      <Facet id="tags" fields={["tags"]} />
      <Results
        id="result"
        items={(data) => data.map((item) => <>{item._source.title}</>)}
      />
    </Elasticsearch>
  );
}

You have to update to the latest version first: npm i react-elasticsearch@latest.

I apologize I did not answer! I stopped using this lib, now I'm using it again, and I noticed it was broken. Hopefully, it works now! Example with the latest version here: https://api-association.cleverapps.io/.

Thank you for your patience!

[akshay-1707]

Hey i am facing the cors issue i m adding images as attachment and code has also been added. i m trying to fetch details from my local elastic search

import React from "react"; import { Elasticsearch, Results, SearchBox, Facet } from "react-elasticsearch";

function AccessControl() { return ( <Elasticsearch url={"http://localhost:9200/userindexes"}> <SearchBox id="mainSearch" fields={["bookingId"]} /> {/* <Facet id="tags" fields={["tags"]} /> */} <Results id="result" items={(data) => data.map((item) => <>{item._source.bookingId}</>)} /> </Elasticsearch> ); }

export default AccessControl; e