TriplyDB / Yasgui

Yet Another Sparql GUI
https://yasgui.triply.cc
MIT License
185 stars 55 forks source link

wrong url used in `Try query in a new browser window` button ? #172

Open alainib opened 3 years ago

alainib commented 3 years ago

Hello

I'm new using Yasgui, trying to connect it to our sparql graphdb endpoint with reactJs front and express API

I'm not sur i configured it good but at this point i get this error when i click "play query" button :

`Try query in a new browser window

Unable to get response from endpoint. Possible reasons:

Incorrect endpoint URL
Endpoint is down
Endpoint is not accessible from the YASGUI server and website, and the endpoint is not CORS-enabled`

the button Try query in a new browser window url is localhost://3034/api/sparql?query=PREFIX...

not localhost:3034/api/sparql?query=PREFIX...


the share button who create curl return this, there is twice localhost :

curl http://localhost:3034/sparqllocalhost:3034/api/sparql --data query=PREFIX... instead of

curl http://localhost:3034/api/sparql --data query=PREF.... who works


My front url is : http://localhost:3034/sparql
and code is :

export function Yasguisparql() {
  const _url = 'http://' + window.location.host + '/api/sparql';
  console.log(_url); // http://localhost:3034/api/sparql

  useEffect(() => {
    const yasgui = new Yasgui(document.getElementById('yasgui'), {
      requestConfig: { endpoint: _url },
          // requestConfig: { endpoint: 'http://dbpedia.org/sparql' }, // this work
      copyEndpointOnNewTab: false,
    });
    return () => {};
  }, []);

  function test() {
    console.log('test', _url); // test http://localhost:3034/api/sparql
    fetch(_url, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        query: `PREFIX rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#> PREFIX rdfs: <http://www.w3.org/2000/01/rdf-schema#> SELECT * WHERE { ?sub ?pred ?obj . } LIMIT 12` }),
    })
      .then((response) => response.json())
      .then((result) => { console.log(result); })
      .catch((e) => {        console.log(e);      });
  }

  return (
    <div className={simpleModalPageStyle.content}>
          <div onClick={() => test()}>test</div>
          <div id="yasgui" />
    </div>   
  );
}

using the "test" button who call the fetch work

any idea how to fix this ?

thanks